Javascript Lazyload队列

Question

我在我的项目中使用jQuery LazyLoad插件来显示大列的小图片。该插件非常有用，唯一的问题是在页面加载时，它会使页面/滚动/ ...速度变慢，因为它会同时加载所有初始（可见）图像（大约60张大小为40x40的图像）。

如果它在负载之间有一个时间间隔一个接一个地加载，例如800ms，那将是惊人的，因为我真的不需要它们直接出现。我相信这会让用户体验更舒适。

不幸的是我对Javascript不太好。我试图使用jQuery延迟功能，但它没有帮助。我真的很感激任何帮助。

相关代码：

    $(self).one("appear", function() {
        if (!this.loaded) {
            $("<img />")
                .bind("load", function() {
                    $(self)
                        .hide()
                        .attr("src", $(self).attr("data-original"))
                        [settings.effect](settings.effectspeed);
                    self.loaded = true;
                })
                .attr("src", $(self).attr("data-original"));
        };
    });

Answer 1

如果您将图片上的data-origional属性设置为源，那么您可以在document.ready上运行这样的内容：

$(function () {
    function load_image($image) {
        if (count >= $images.length) {clearInterval(timer); return false;}
        $image.attr('src', $image.attr('data-origional'));
        count++;
    }
    var $images = $('img'),
        count   = 0,
        timer   = setInterval(function () {
            load_image($images.eq(count));
        }, 800);
});