Javascript 如何使图像仅在视口中时延迟加载？

这些天我看到了很多网站，主要是教程网站，它们有很多图片，一旦进入查看端口，它们只会将图片加载到页面的下游

我该怎么做呢？ 当您向下滚动页面时，视口下方的图像会淡入

演示：

---

用占位符替换图像（例如，只需将“src”属性更改为其他属性，这样图像就不会加载，但url仍然可以访问），然后将窗口滚动事件绑定到一个函数，该函数将查找当前滚动位置的所有图像，并将图像src替换为真正的img标记

这是密码。这是未经测试的，但这应该是基本想法：

<img src="" realsrc="/myimage.png" />

$(document).ready(function(){

  $(window).scroll(function(){
    $('img[realsrc]').each(function(i){
      var t = $(this);
      if(t.position().top > ($(window).scrollTop()+$(window).height()){
        t.attr('src', t.attr('realsrc')); // trigger the image load
        t.removeAttr('realsrc'); // so we only process this image once
      }
    });
  })

});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
$（'img[realsrc]'）。每个（函数（i）{
var t=$（本）；
if（t.position（）.top>（$（窗口）.scrollTop（）+$（窗口）.height（））{
t、 attr（'src'，t.attr（'realsrc'）；//触发映像加载
t、 removeAttr（'realsrc'）；//所以我们只处理这个映像一次
}
});
})
});

不依赖JQuery的简单解决方案：

    <script type="text/javascript">
        refresh_handler = function(e) {
        var elements = document.querySelectorAll("*[realsrc]");
        for (var i = 0; i < elements.length; i++) {
                var boundingClientRect = elements[i].getBoundingClientRect();
                if (elements[i].hasAttribute("realsrc") && boundingClientRect.top < window.innerHeight) {
                    elements[i].setAttribute("src", elements[i].getAttribute("realsrc"));
                    elements[i].removeAttribute("realsrc");
                }
            }
        };

        window.addEventListener('scroll', refresh_handler);
        window.addEventListener('load', refresh_handler);
        window.addEventListener('resize', refresh_handler);
    </script>

刷新处理程序=函数（e）{
var elements=document.queryselectoral（“*[realsrc]”）；
对于（var i=0；i

根据LazyLoad的网站，LazyLoad插件不再可用。请参见下面我的答案。该项目看起来（再次）处于活动状态。它也在GitHub上：。什么部分要求浏览器是全新的？getBoundingClientRect似乎完全受支持。您可能也想绑定到“resize”事件它工作得很好！顺便说一句，您必须替换HTML中出现的所有

（答案中没有注明）by:

如果您想避免IDE发出任何警告，请使用

数据src

而不是

realsrc

（在javascript中也替换它）非常好、简单和快速！！