1
私は画像を読み込むためにjquery.lazyloadを使用しています。サンプルごとに正常に動作します。遅延読み込みエラー画像
元画像がローダーやエラーでない場合は、プレースホルダ画像を「no-image.jpg」に変更する必要があります。
私はこれに関連する次のスレッドを手に入れました。 Can't get LazyLoad and onerror to work together on an image
スレッドごとに、私は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を入れます。私のlazyload 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」が示されているのと同じプレースホルダ画像は（空）
しかし、これも読み込み時に画像が表示されません。ロードされた後、元のファイルがロードされていない場合は、no-image.jpgとする必要があります。当初はローディングを表示する必要があります... – Akhil
元の画像がロードされていない場合、srcは置き換えられません。だからエラーは呼ばれません。 srcにはプレースホルダリンクがあります – Akhil