javascript - 有個文章中圖片的懶載入lazyload.js的疑問？

有個文章中圖片的懶載入lazyload.js的疑問？

修改目標img元素的src屬性為orginal屬性，從而中斷圖片的載入。

lazyloa的使用需要這樣啊，需要增加一個orginal屬性指向原圖啊，那我文章中的圖片，豈不是需要在伺服器端用正則處理一下嗎，這多麻煩啊！！！

lazyloa為什麼不能在瀏覽器載入圖片之前把圖片“收為囊中”阻斷瀏覽器自動載入圖片嗎？

js不是有個頁面載入完畢（html載入完畢，但資源沒開始載入的事件嗎？好像是onreadystatechange啥玩意的，忘了）我都曉得有這樣的事件，lazyloa難道不知道嗎，還需要img配合它，想的太美了吧，我都知道這樣改img，還要你lazyloa幹嘛，寫個滾動事件不就完事了嗎？

求大神指點啊！

回複內容：

有個文章中圖片的懶載入lazyload.js的疑問？

修改目標img元素的src屬性為orginal屬性，從而中斷圖片的載入。

lazyloa的使用需要這樣啊，需要增加一個orginal屬性指向原圖啊，那我文章中的圖片，豈不是需要在伺服器端用正則處理一下嗎，這多麻煩啊！！！

lazyloa為什麼不能在瀏覽器載入圖片之前把圖片“收為囊中”阻斷瀏覽器自動載入圖片嗎？

js不是有個頁面載入完畢（html載入完畢，但資源沒開始載入的事件嗎？好像是onreadystatechange啥玩意的，忘了）我都曉得有這樣的事件，lazyloa難道不知道嗎，還需要img配合它，想的太美了吧，我都知道這樣改img，還要你lazyloa幹嘛，寫個滾動事件不就完事了嗎？

求大神指點啊！

lazyloa的使用需要這樣啊，需要增加一個orginal屬性指向原圖啊，那我文章中的圖片，豈不是需要在伺服器端用正則處理一下嗎，這多麻煩啊！！！

圖片lazyload就需要這樣，這個和伺服器沒有任何關係。伺服器端寫正則幹什嗎？

lazyloa為什麼不能在瀏覽器載入圖片之前把圖片“收為囊中”阻斷瀏覽器自動載入圖片嗎？

orginal屬性指向原圖就是達到這個目的的啊，orginal這個屬性是img標籤沒有的，瀏覽器DOM解析器只是當成一個普通的使用者自訂屬性，不會將其當成src屬性那樣去載入圖片資訊

js不是有個頁面載入完畢（html載入完畢，但資源沒開始載入的事件嗎？好像是onreadystatechange啥玩意的，忘了）我都曉得有這樣的事件，lazyloa難道不知道嗎，還需要img配合它，想的太美了吧，我都知道這樣改img，還要你lazyloa幹嘛，寫個滾動事件不就完事了嗎？

這段有點不理解，是可以通過監聽頁面滾動事件將lazyload啟用，載入真實的圖片資料，通過將orgina屬性值賦給src屬性

例如下:
初次頁面載入的時候載入到的DOM元素是這樣的

那麼當頁面載入的時候，回去載入loading.gif，而這個檔案通常就很小，能夠馬上載入
這樣當不需要圖片顯示的時候，例片在頁面的中下部，使用者還沒有滾動到指定位置時候，這是的圖片資料就不需要載入，減少頁面流量及頁面的渲染資料，window.onload事件監聽能更快的得到響應。這個和documentonready事件無關。
當需要顯示圖片的時候，也就是使用者滾動到頁面特定位置的時候，通過JS將img的src屬性指向orginal屬性的值，同時可將orginal屬性刪除

此時img指向真實的地址，圖片資料才開始載入

為什麼要設定original屬性來實現lazyload

瀏覽器中幾乎所有操作(除了網路操作)都是在單線程中進行的。網路操作可由多個並行線程執行。並行串連數是有限的(通常為 2 至 6 個,以 Firefox 3 為例是 6 個)。主線程有個一個事件迴圈，是一個無限迴圈,永遠處於接受處理狀態,並等待 事件(如布局和繪製事件)發生,並進行處理。那麼圖片資源的載入就是一個網路操作，當瀏覽器解析到一個img標籤時，就會用src指定的網路地址去載入圖片資訊，而不是等到documentonready事件監聽執行完畢後再去載入資源，所以為了實現lazyload（不載入真實的圖片資源），需要設定一個自訂屬性來儲存真真實位址，在需要顯示的時候再設定到src屬性上

我們可以做個簡單的實驗，看src是不是會被載入請求：
如下：
頁面執行後，我們能chrome的資源控制台能看到
Failed to load resource: the server responded with a status of 404 (Not Found)
的提示資訊
所以錯誤的資源請求還是發生了

lazyload 本身只是個輔助,當然其功能直接手寫代碼能實現. 你非要讓它來完成它力所不能及的事情自然是不行的.

