Question

我写了一个脚本，以防止所有图片直接加载到页面上。

<div id="domo">
<img src="PUT_YOUR_VALUE"></br>
<img src="PUT_YOUR_VALUE"></br>
<img src="PUT_YOUR_VALUE"></br>
<img src="PUT_YOUR_VALUE"></br>
</div><script>
    var images = document.querySelectorAll("#domo img"), item;
    [].forEach.call(images, function (item) {
        item.setAttribute("data-src", item.src);
        item.removeAttribute("src");
    });
</script>

现在我想加载这些图像，如果它们在视口

中可见

我试过但失败了，下面是java脚本只是在脚本上面添加图片并检查

<script>
    var images = document.querySelectorAll("#domo img"), item;
    [].forEach.call(images, function (item) {
        item.setAttribute("data-src", item.src);
        item.removeAttribute("src");
    });
    function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
        );
    }
    //these handlers will be removed once the images have loaded
    window.addEventListener("DOMContentLoaded", lazyLoadImages);
    window.addEventListener("load", lazyLoadImages);
    window.addEventListener("resize", lazyLoadImages);
    window.addEventListener("scroll", lazyLoadImages);

    function lazyLoadImages() {
        var images = document.querySelectorAll("#domo img[data-src]"), item;
        // load images that have entered the viewport
        [].forEach.call(images, function (item) {
            if (isElementInViewport(item)) {
                item.setAttribute("src", item.getAttribute("data-src"))
                item.removeAttribute("data-src")
            }
        })
        // if all the images are loaded, stop calling the handler
        if (images.length == 0) {
            window.removeEventListener("DOMContentLoaded", lazyLoadImages);
            window.removeEventListener("load", lazyLoadImages);
            window.removeEventListener("resize", lazyLoadImages);
            window.removeEventListener("scroll", lazyLoadImages);
        }
    }
</script>

我认为问题出在if (isElementInViewport(item)) {，如果你得到了什么，请帮助我。

Answer 1

<强> 1。不要用JS改变图像

页面加载后，不要使用JS更改img标记属性！将src更改为data-src的问题是，无论何时执行脚本太晚，浏览器都已开始加载图像。所以你的延迟加载将无法正常工作。始终在页面渲染上创建正确的元素。

<div id="domo">
  <img src="" data-src="PUT_YOUR_VALUE"></br>
  <img src="" data-src="PUT_YOUR_VALUE"></br>
  <img src="" data-src="PUT_YOUR_VALUE"></br>
  <img src="" data-src="PUT_YOUR_VALUE"></br>
</div>

<强> 2。使用现有库进行延迟加载

当然，您可以尝试自己做所有事情。但是有很多可用的插件和库，做你想要的，也有更多的选择。它们的优点是，它们大多经过良好测试并具有广泛的浏览器支持。所以不要再做一切了。 ;）

第3。一个例子

这说我们可以创建一个工作示例，就像使用jQuery.Lazy一样。我们只需要这个插件和上面提到的＃1点的变化。

＆＃13;

$(function() {
    $("#domo img").lazy();
});

＆＃13;

img {
  width: 200px;
  height: 150px;
  display: block;
  margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>

<div id="domo">
  <img src="" data-src="https://dummyimage.com/200x150/000000/fff&text=1">
  <img src="" data-src="https://dummyimage.com/200x150/000000/fff&text=2">
  <img src="" data-src="https://dummyimage.com/200x150/000000/fff&text=3">
  <img src="" data-src="https://dummyimage.com/200x150/000000/fff&text=4">
</div>

＆＃13;

防止加载所有图像，只需加载屏幕中可见的图像

1 个答案: