??? 有一天我一個朋友訪問一個XX圖片網站……每個人背后總有幾個背黑鍋的“朋友”，好吧，我承認那個“朋友”其實是我自己，你能把我怎么的？

??? 這個網站用的是Discuz X2搭建的，啟動了Discuz的圖片延遲加載的功能。現在很多圖片網站為了降低服務器壓力都啟用了圖片延遲加載的機制，也就是只有圖片處于可視區域才加載，這樣用戶沒看到的圖片就不加載，對于服務器的負載減輕還是幫助很大的。大致的原理是，對于圖片標簽不是把圖片的路徑指定到src屬性上，src屬性指定一個非常小的空白圖片，真正的圖片地址設置到一個自定義的屬性上，比如file，這樣img標簽就是這樣：

<img src="blank.jpg" file="00xx.jpg"/>

??? 由于圖片的地址指定到了一個自定義屬性上，所以img不會去加載那個圖片。當圖片在瀏覽器上加載的時候顯示的那個非常小的空白圖片blank.jpg（如果不設置初始的src會顯示紅叉，很難看），而且頁面中所有的要延遲加載的圖片都是使用blank.jpg，由于blank.jpg加了緩存，這樣對服務器的壓力幾乎沒有。

??? 然后啟動一個定時器，定時檢測圖片是否處于可視區域，如果處于可視區域，則將file屬性的值設置到src屬性上，這樣圖片才開始加載。這是偉大程序員的偉大發明，真的很牛。

??? 但是對于用戶來講就沒那么爽了，如果網速比較慢的話，每次滾動到一個圖片上都要等待它加載很痛苦！而且看XX組圖通常要把好幾個帖子一起打開，讓那些帖子慢慢后臺加載，咱們再一個帖子一個帖子的看，但是一旦有了延遲加載就只能挨個打開再忍耐著它加載看了，不爽呀，Hold不住呀！

??? 程序員用程序員的智慧，問題很好解決，寫一個JavaScript腳本把所有圖片的file屬性一次性設置到src屬性上不就ok了嗎？寫一個JavaScript腳本：

javascript:var html='';for(var i=0;i<document.images.length;i++){var img = document.images[i];if(img.file){html+='<img src='+img.file+' />';}};document.write(html+"<br/>ok");

??? 我這個代碼更直接，遍歷網頁上有file屬性的圖片，然后構造出一個含有所有圖片的html然后輸出到瀏覽器，哈哈頁面上只有圖片！這段代碼是非常簡單的JavaScript dom操作代碼。

??? 把上面的代碼粘貼到地址欄，按下回車整個網頁只有圖片了，沒有廣告、沒有文字、只有圖片，不要太爽喲！

??? 下面這張延遲加載的原始網頁（為了和諧，我費了半天勁才選了一個尺度非常小的組圖，同時為了和諧，我把網址、網站名都mosaic了，請諒解）：

?

?

執行腳本后的頁面：

?

??? 為了用起來更方便把上面的代碼添加到收藏夾，打開每個圖片帖子以后點擊一下收藏夾里這個代碼的項，方便更進一步！

??? 如果想用起來更方便一點，可以寫一個BHO，每次網頁加載完畢的時候自動執行上面的代碼，就完全自動化了，我比較懶就不去寫了，思路留給大家。

如鵬網.Net培訓班正在報名，有網絡的地方就可以參加如鵬網的學習，學完就能高薪就業，點擊此處了解

?

? ??三年前只要懂“三層架構”就可以說“精通分層架構”；現在則需要懂IOC（AutoFac等）、CodeFirst、lambda、DTO等才值錢；

????三年前只要會SQLServer就可以說自己“精通數據庫開發”；現在則需還需要掌握MySQL等開源數據庫才能說是“.Net開源”時代的程序員；

????三年前只要會進行用戶上傳內容的安全性處理即可；現在則需要熟悉云存儲、CDN等才能在云計算時代游刃有余；

????三年前只要掌握Lucene.Net就會說自己“熟悉站內搜索引擎開發”；現在大家都用ElasticSearch了，你還用Lucene.Net就太老土了；

????三年前發郵件還是用SmtpClient；現在做大型網站發郵件必須用云郵件引擎；

????三年前緩存就是Context.Cache；現在則是Redis、Memcached的天下；

????如鵬網再次引領.Net社區技術潮流！點擊此處了解如鵬網.Net最新課程

轉載于:https://www.cnblogs.com/rupeng/archive/2011/08/21/2147794.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的拒绝图片延迟加载，爽爽的看美图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。