目的
ページ上の壊れた画像をすべてnoimageに差し換える
前回
サンプルのHTML
broken_image.html
<html>
<head>
<style type="text/css">
div {
width: 150px;
height: 150px;
border: 1px solid;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<!--存在しない画像-->
<div>
<img src="http://google.com/hogehoge.jpg" />
</div>
<div>
<img src="http://google.com/fugafuga.jpg" />
</div>
<!--存在する画像-->
<div>
<img src="https://3.bp.blogspot.com/-rNmXJXzt8DQ/VsPnSNB6MzI/AAAAAAAA4Dw/GOIgFy4n2ls/s180-c/music_sakkyoku_piano_man.png "
/>
</div>
<div>
<img src="https://2.bp.blogspot.com/-lAIFjv3ejHg/WEztKOlwR-I/AAAAAAABAUU/d9sJUl9xolIAaodsAHmZQFVj_7wkqpSmQCLcB/s400/ai_music.png "
/>
</div>
</body>
</html>
| 表示結果 |
|---|
 |
上の2枚の画像が壊れているので、
直します。
Level②.onerrorを使う
jQueryのonerrorを利用すれば、
壊れた画像をキャッチして直せるのではないかという発想。
これでちょっと作ってみます。
試行したHTML
<html>
<head>
<style type="text/css">
div {
width: 150px;
height: 150px;
border: 1px solid;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
<!--jQuery読み込み-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--onerror(動かない)-->
<script type="text/javascript">
$ = jQuery;
$img.on("error", function () {
$img.attr("src", "https://placehold.jp/150x150.png?text=NoImage");
})
</script>
</head>
<body>
<!--存在しない画像-->
<div>
<img src="http://google.com/hogehoge.jpg" />
</div>
<div>
<img src="http://google.com/fugafuga.jpg" />
</div>
<!--存在する画像-->
<div>
<img src="https://3.bp.blogspot.com/-rNmXJXzt8DQ/VsPnSNB6MzI/AAAAAAAA4Dw/GOIgFy4n2ls/s180-c/music_sakkyoku_piano_man.png "
/>
</div>
<div>
<img src="https://2.bp.blogspot.com/-lAIFjv3ejHg/WEztKOlwR-I/AAAAAAABAUU/d9sJUl9xolIAaodsAHmZQFVj_7wkqpSmQCLcB/s400/ai_music.png "
/>
</div>
</body>
</html>
| 表示結果 |
|---|
|
なんと、これは動きません。
どこに問題があるのでしょうか。
自分のような初心者はここでまずハマりました。
これをFIXするためには、「JavaScriptの実行順」を理解しておく必要があります。
次回
Level②-2 onerrorを動かす に続く！