jQuery 惰性 - 一次加载所有图像

Question

我正在整理一个画廊，其中包括一些相当大的 GIF。我认为最好在加载时尝试显示预加载器，并且只加载可见图像。为此，我发现 jQuery Lazy: http://jquery.eisbehr.de/lazy/

我遇到的问题是所有图像似乎都同时加载，我有点困惑为什么！？！你可以在这里看到我得到的：http://psychro.me/work/

非常感谢任何帮助。非常感谢。

Answer 1

如文档中所写：（根据 http://jquery.eisbehr.de/lazy/example_delayed-loading ）

...Lazy uses an delay time to load all images at once after page load, instead of only load the elements in view...

所以我认为如果您删除您网站上使用的"delay" 属性（测试评论），所有图像都不会立即加载。

您网站上的代码：

$(function() {
    $('.lazy').lazy({

        beforeLoad: function(element) {
            var imageSrc = element.data('src');
            console.log('image "' + imageSrc + '" is about to be loaded');
        },
        scrollDirection: 'vertical',
        delay: 1000, // For testing
        effect: "fadeIn",
        effectTime: 1000,
        threshold: 0
    });
});

正确的形式：

$(function() {
    $('.lazy').lazy({

        beforeLoad: function(element) {
            var imageSrc = element.data('src');
            console.log('image "' + imageSrc + '" is about to be loaded');
        },
        scrollDirection: 'vertical',
        effect: "fadeIn",
        effectTime: 1000,
        threshold: 0
    });
});

jQuery 惰性 - 一次加载所有图像

jQuery Lazy - loading all images at once

jquery

lazy-evaluation