Question

我现在看到很多网站，主要是有很多图片的教程网站，只有当他们进入视口时才会在页面下方加载图片？

我将如何做到这一点？

一个例子：

http://www.chopeh.com/blog/logo-design-start-to-finish/

向下滚动页面时，视口下方的图像会淡入

Answer 1

http://www.appelsiini.net/projects/lazyload
https://github.com/tuupola/jquery_lazyload

演示：
http://www.appelsiini.net/projects/lazyload/enabled.html

Answer 2

用占位符替换图像（例如，只需将“src”属性更改为其他内容，这样图像就不会加载，但仍然可以访问网址），然后将窗口滚动事件绑定到将要查找的函数当前滚动位置的所有图像，并将图像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
      }
    });
  })

});

Answer 3

不依赖于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>

Answer 4

IntersectionObserver最小可运行示例

这本质上是在https://appelsiini.net/projects/lazyload/上提到的https://stackoverflow.com/a/2322042/895245所使用的技术

Web API的发展已经如此之快，以至于从头开始编写它就不难了！

var observer = new IntersectionObserver(
    (entries, observer) => {
        entries.forEach(entry => {
            if (entry.intersectionRatio > 0.0) {
                img = entry.target;
                if (!img.hasAttribute('src')) {
                    alert('will load the image!!!');
                    img.setAttribute('src', img.dataset.src);
                }
            }
        });
    },
    {}
)
for (let img of document.getElementsByTagName('img')) {
    observer.observe(img);
}

.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}

<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d4/George-W-Bush.jpeg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Bill_Clinton.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/9/90/George_H._W._Bush%2C_President_of_the_United_States%2C_1989_official_portrait_%28cropped%29.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/1/16/Official_Portrait_of_President_Reagan_1981.jpg"></div>

整页演示：https://cirosantilli.com/web-cheat/js-image-load-viewport.html

GitHub上游：https://github.com/cirosantilli/cirosantilli.github.io/blob/1f637bf4791b115777300f48f427f0a6bb409fc1/web-cheat/js-image-load-viewport.html

这项技术只是以下各项的组合：

在Chromium 76中测试。

如何仅在视口中加载图像？

4 个答案: