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

根据此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
    });
});

最佳答案

“缺失的”占位符不会消失的原因是因为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事件，因此延迟加载丢失的图像并不容易。如果您想在用户滚动时延迟加载，则需要添加滚动间谍以淡入已知在该滚动位置加载的图像以及任何其他已注册的图像（即占位符）。