时间戳

首页 > 解决方案 > jQuery Lazy - 一次加载所有图像

jquery - jQuery Lazy - 一次加载所有图像

问题描述

我正在整理一个包含一些相当大的 GIF 的画廊。我认为最好在加载时尝试显示预加载器并仅加载可见图像。为此，我找到了 jQuery Lazy：http: //jquery.eisbehr.de/lazy/

我遇到的问题是所有图像似乎一次加载，我有点不知道为什么！？！你可以看到我在这里得到了什么：http: //psychro.me/work/

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

标签： jquerylazy-evaluation

解决方案

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

...Lazy 使用延迟时间在页面加载后立即加载所有图像，而不是仅加载视图中的元素...

因此，我认为如果您删除网站上使用的“延迟”属性（评论用于测试），则不会立即加载所有图像。

您网站上的代码：

$(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
    });
});

推荐阅读