画像の読み込みに jquery.lazyload を使用しています。サンプルに従ってすべて正常に動作しています。
元の画像がローダーまたはエラーでない場合、プレースホルダー画像を「no-image.jpg」に変更する必要があります。
これに関連する次のスレッドを取得しました。 画像で LazyLoad と onerror を連携させることができません
スレッドに従って、lazyload js ファイルを更新し、エラー画像のスクリプトを含めました。次のように私のhtmlを確認してください。
<!DOCTYPE html>
<html>
<head>
<title>Lazy Load Enabled</title>
<style>
.container img {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<img class="lazy" data-original="img/1.jpg" width="765" height="574" /><br />
<img class="lazy" data-original="img/2.jpg" width="765" height="574" /><br />
<img class="lazy" data-original="img/error.jpg" width="765" height="574"><br />
<img class="lazy" data-original="img/4.jpg" width="765" height="574" /><br />
<img class="lazy" data-original="img/5.jpg" width="765" height="574" /><br />
<img class="lazy" data-original="img/6.jpg" width="765" height="574" /><br />
<img class="lazy" data-original="img/7.jpg" width="765" height="574" /><br />
<img class="lazy" data-original="img/8.jpg" width="765" height="574" /><br />
</div>
<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$(".lazy").error(function () {
$(this).attr('src', 'img/no-image.jpg');
});
$("img.lazy").lazyload();
});
</script>
</body>
</html>
ここでは意図的にフォルダに存在しない error.jpg を入れています。私の遅延ロードjsは;
$.fn.lazyload = function(options) {
var elements = this;
var $container;
var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : function(ele,settings)
{
$(ele).attr("src",$(ele).attr("data-original"));
},
load: null,
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
};
ここでは、js ファイルの一部のみを示します。
しかし、ページが表示されると、「no-image.jpg」の代わりに同じプレースホルダー画像 (空) が表示されます