我正在使用 jquery.lazyload 来加载我的图像。根据样本,一切正常。
现在,当原始图像不是加载器或错误时,我需要将占位符图像更改为我的“no-image.jpg”。
我得到了与此相关的以下线程。 无法让 LazyLoad 和 onerror 在图像上一起工作
根据线程,我更新了延迟加载 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'