1

根据此链接，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
    });
});
4

1 回答 1

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

于 2014-06-13T14:51:51.563 回答