成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端性能優(yōu)化--懶加載和預(yù)加載

loostudy / 613人閱讀

摘要：集合中有等屬性文檔各種高度視口的大小文檔的大小文檔的大小預(yù)加載標(biāo)簽

懶加載 代碼實(shí)現(xiàn) html 




    
    
    
    Document
css 
.image-item {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: gray;
}
js 
        var viewHeight = document.documentElement.clientHeight;

        function lazyload() {
            var imgs = document.querySelectorAll("img[data-original][lazyload]");
            imgs.forEach(item => {

                if (item.dataset.original == "") {
                    return;
                }
                var rect = item.getBoundingClientRect();
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    var img = new Image();
                    img.src = item.dataset.original;
                    console.log(img.src)
                    img.onload = function() {
                        item.src = img.src;
                    }
                    item.removeAttribute("data-original");
                    item.removeAttribute("lazyload")
                }
            })
        }
        lazyload();
        document.addEventListener("scroll", lazyload)
效果

藍(lán)色為已經(jīng)請求加載的圖片

紅色為還沒有請求加載的圖片

默認(rèn)打開，沒有操作前

向下滾動前

向下滾動后

冷門屬性 ocument.addEventListener（事件監(jiān)聽） 
document.addEventListener("scroll", function() {
    console.log("aa")
})

dataset 
用`dataset.original`獲取`data-original` 的屬性
img.onload

事件在圖片加載完成后立即執(zhí)行

getBoundingClientRect

用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性

文檔各種高度

document.documentElement.clientHeight:視口的大小
document.documentElement.scrollHeight:文檔的大小
document.documentElement.offsetHeight:文檔的大小

預(yù)加載 標(biāo)簽
new Image() 
var image = new Image();
image.src = "https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg";

xml

    
    
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102076.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    懶加載和預(yù)加載
    
                                                     
    摘要：使用默認(rèn)是對象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。

一、懶加載
1.什么是懶加載
showImg(https://segmentfault.com/img/remote/1460000016666819);
懶加載也...
    
                                                   
                          
    
                                
    
                                    appetizerio
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    懶加載和預(yù)加載
    
                                                     
    摘要：使用默認(rèn)是對象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。

一、懶加載
1.什么是懶加載
showImg(https://segmentfault.com/img/remote/1460000016666819);
懶加載也...
    
                                                   
                          
    
                                
    
                                    Shonim
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    懶加載和預(yù)加載
    
                                                     
    摘要：使用默認(rèn)是對象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。

一、懶加載
1.什么是懶加載
showImg(https://segmentfault.com/img/remote/1460000016666819);
懶加載也...
    
                                                   
                          
    
                                
    
                                    hedzr
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    前端性能優(yōu)化
    
                                                     
    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對頁面進(jìn)行緩存能夠有利于減少請求發(fā)送，從而達(dá)到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。

優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南
Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個單頁應(yīng)用中，往往只有一...
    
                                                   
                          
    
                                
    
                                    Dean
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<