图像延迟加载

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插件。 例如，一个非常轻便的人就是懒惰 。

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