防止所有圖像加載，只加載在屏幕上可見的圖像

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

不要改變img標籤頁面加載後，用JS的屬性！將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點提到的變化。

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

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

<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>