javascript實現圖片延遲加載方法匯總(三種方法)_javascript技巧

然后在頁面加載時，把所有使用了lazy_src的圖片都保存到數組里，然后在滾動時計算可視區域的top，然后把延時加載的圖片中top小于當前可視區域（即圖片出現在可視區域內）的圖片的src的值用lazy_src的來替換（加載圖片）：
JS代碼：



使用方法：把頁面上需要延時加載的圖片src改成為lazy_src，然后把上面的js放到body最后面，然后調用：lazyLoad.init();

調戲的方法可以使用firebug來查看一時圖片是否是延時加載。
另外：


如果你的頁面上存在有內容切換的欄目的話，可能在切換時切換的內容里的圖片可能會不顯示，處理的方法是在內容時單獨圖片加載處理，如：





原生態js實現圖片延時加載方法三：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
    

    

    

        
javascript實現圖片延遲加載方法匯總(三種方法)_javascript技巧
        
javascript實現圖片延遲加載方法匯總(三種方法)_javascript技巧:看到一些大型網站，頁面如果有很多圖片的時候，當你滾動到相應的行時，當前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁面加載的速度，對于比較長的頁面來說，這個方案是比較好的。原理是這
        
推薦度：

    
    

        
            點擊下載本文
            文檔為doc格式
        
    

              
        
                

            標簽：
                        圖片
                        加載
                        幾種方法
                    
                
            
            
 
                    

                        
熱門焦點