將src轉換爲懶惰

Question

對現有的懶加載插件（它們太複雜以至於無法理解其中的代碼）都不滿意，我認爲我可以創建一個簡單易懂的腳本，用於延遲加載圖像。

我的想法很簡單。從下面的（變形的）img標籤開始。

<img lazy="http://lorempixel.com/400/200"/> 

使用javascript，當頁面向上或向下滾動時，用「src」替換單詞「lazy」。

function hackyaFunction_lazy() { 
    [].forEach.call(document.querySelectorAll('img[lazy]'), function(img) { 
    img.setAttribute('src', img.getAttribute('lazy')); 

    img.onload = function() { 

     var imgs = document.querySelectorAll('[lazy]'); 
     for (i = 0; i < imgs.length; i++) { 
     var o = imgs[i], 
      lazy = o.getAttribute('lazy'); 
     if (o.y <= (window.screen.height + window.scrollY + 50) && o.y >= (window.scrollY - 50)) { 
      o.setAttribute('src', lazy); 
      o.removeAttribute('lazy'); 
     } 
     } 
    } 
    window.onload = window.onscroll = hackyaFunction_lazy; 

    }); 
} 

我知道足夠的javascript來位一起劈&件，使一些作品的。而上面的代碼有點工作。

在我的控制檯上，我發現單詞「lazy」已成功替換爲視口中圖像的「src」。

但是，在視口之外的圖像，這就是我所看到的。

<img lazy="http://lorempixel.com/400/200/sports/Dummy-Text" src="http://lorempixel.com/400/200/sports/Dummy-Text"> 

所以我一半工作代碼&這是我能做到的最好。

我應該只使用任何一個可用的插件;只是想看看我是否可以創建簡單的簡單的&。

既然我很接近做這件事情，我不願放棄它。

任何幫助將不勝感激。

我想在jsfiddle上放置整個東西（html & js），但圖像無法顯示在jsfiddle上。不知道爲什麼。

該代碼在本地環境中工作（如所述）。

Answer 1

的.forEach()中的第一行改變當前圖像的src而不刪除lazy並沒有測試它是否在視圖或沒有，所以.forEach()之後已經跑這條線的每一次他們都會所有已更新圖像。這就是爲什麼當您使用開發工具檢查元素時，許多圖像同時具有src和lazy屬性。

如果這個想法是隻設置src一旦圖像滾動到視圖中，併爲已經在視圖頁面加載任何圖像，你可以僅保留內for循環的功能做到這一點：

function hackyaFunction_lazy() { 
    var imgs = document.querySelectorAll('[lazy]'); 
    for (i = 0; i < imgs.length; i++) { 
    var o = imgs[i]; 
    if (o.y <= (window.screen.height + window.scrollY + 50) && o.y >= (window.scrollY - 50)) { 
     o.src = o.getAttribute('lazy'); 
     o.removeAttribute('lazy'); 
    } 
    } 
} 

window.onload = window.onscroll = hackyaFunction_lazy; 

這工作，因爲每個滾動它首先選擇任何元素仍然有lazy屬性，那麼這些元素它測試它們是否考慮到，如果是它設置了src並刪除lazy。尚未滾動到視圖中的元素不會更新。

看到它在這裏工作：https://jsfiddle.net/vb779g7v/2/

編輯/ P。 S.請注意，您的if測試檢查元素是否在視圖中是不正確的，因爲screen.height顧名思義，給出了整個屏幕的高度，而不是瀏覽器中客戶區的高度。但是，這不是你的問題的核心，所以我會留下修復作爲一個讀者的練習...