javascript - 如何在img标签上结合holder.js和lazyload.js

Question

根据这个link ，lazyload 现在与holder.js 脚本兼容。

这是一个jsFiddle 。我预计第三张图片会像其他图片一样逐渐消失。但我无法让它发挥作用。

有人可以告诉我我做错了什么吗？

提前致谢。

HTML:

<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" alt="BMW M1 Hood">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_side.jpg" alt="BMW M1 Side">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/does-not-exist" alt="Viper 1">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/viper_corner.jpg" alt="Viper Corner">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m3_gt.jpg" alt="BMW M3 GT">
<img data-src="holder.js/200x200/industrial" data-original="http://www.appelsiini.net/projects/lazyload/img/corvette_pitstop.jpg" alt="Corvette Pitstop">

JS:

$(function () {
    $("img").lazyload({
        effect: "fadeIn",
        effectspeed: 2000,
        skip_invisible: false
    });
});

Answer 1

“丢失”占位符没有淡入的原因是因为lazyLoad的load事件永远不会触发它(它的图像不存在)。您需要指定您希望手动加载和淡入的图像数量:http://jsfiddle.net/zBuJV/2/

$(function () {
    var expectedImages = 5;
    var loadExpected = (function (totalImages, finishCallback) {
        var total = totalImages;
        var loaded = 0;
        return function () {
            loaded++;
            if (loaded >= total) {
                finishCallback();
            }
        }
    })(expectedImages, function () {
        $("img").fadeIn(2000);
    });

    $("img").lazyload({
        effect: "hide",
        effectspeed: 0,
        skip_invisible: false,
        load: function () {
            loadExpected();
        }
    });
});

lazyLoad 不提供 error 事件，因此延迟加载丢失的图像并不容易。如果您想在用户滚动时延迟加载，则需要添加滚动 spy 以淡入已知在该滚动位置加载的图像以及任何其他注册图像(即占位符)。