Question

经过一些谷歌搜索和一些脑力劳动，我想出了这个小脚本，懒得加载我的图像：

function elementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight));
}
function lazyLoad() {
    var els, backgroundImage;
    els = document.getElementsByClassName('lazyLoad');
    for (var i = 0; i < els.length; i++) {
        backgroundImage = els[i].dataset.bgimg;
        if (elementInViewport(els[i])) {
            els[i].style.backgroundImage = 'url('+backgroundImage+')';
        };
    };
};
lazyLoad();
window.addEventListener('scroll',lazyLoad);

和html：

<div class="lazyLoad" data-bgimg="<?php echo $image_url; ?>"></div>

我想知道这是否真的有效，因为它看起来确实如此：当元素出现在视图中时，我正确应用了背景图像样式，我通过开发工具检查，但它做得如此之快以至于它实际上似乎是图像已经被加载到某个地方，可能是因为data-bgimg在内存中？我也按ctrl + shift + r重新加载页面，以免使用缓存，但结果相同：太快而无法实现。

Answer 1

为backgroundImage样式的设置添加延迟。这将使您能够观察延迟加载。

Answer 2

我建议使用微javascript插件。例如。一个非常轻量级的justlazy。

您的优势在于它的工作正常并且您获得了经过良好测试的代码。也许您可以查看实现，因为较旧的IE浏览器不支持您的某些功能/属性（例如数据集）。如果您需要这样的旧浏览器;）

图像懒加载

2 个答案: