图片延迟加载答案

【问题标题】：Images Lazy load图片延迟加载
【发布时间】：2015-12-01 19:05:40
【问题描述】：

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

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 重新加载了页面，以便不使用缓存但结果相同：太快而不真实。

【问题讨论】：

请注意，onscroll 每秒可以触发数百次，并且您甚至会重置已加载的图像...
你是在本地主机上测试吗？如果你这样做，那么加载将非常快。首先在开发工具打开时禁用缓存（有一个选项）。其次尝试使用网络节流来降低加载速度。
感谢@dandavis，没想到。稍后我将添加一个条件来检查元素是否已经应用了 bg img。如果我理解你对 onscroll 事件的意思，我总是有点害怕使用它，原因与你写的一样，但是客户要求延迟加载，我想尽量减少插件和库的使用
不知道网络限制，谢谢@Cristy！我正在实时服务器中进行测试，但我刚刚意识到问题可能在于图像始终相同......出于测试目的
至于@dandavis 提出的观点，请考虑对 onscroll 事件进行去抖动或节流。 davidwalsh.name/javascript-debounce-function

标签： javascript lazy-loading

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：