国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

圖片懶加載

int64 / 1496人閱讀

摘要：假設來表示圖片到可視區域頂部距離并設來表示可視區域的高度。可以是單一的也可以是數組，元素和元素相交程度達到該值的時候注冊的回調函數將會被執行。默認值是意味著只要有一個像素出現在元素中，回調函數將會被執行。

[TOC]

圖片懶加載 什么是懶加載

懶加載其實就是延遲加載，是一種對網頁性能優化的方式，比如當訪問一個頁面的時候，優先顯示可視區域的圖片而不一次性加載所有圖片，當需要顯示的時候再發送圖片請求，避免打開網頁時加載過多資源。

解決方案 


src先放一張占位圖, 待該元素出現在"視口", 將src 替換成data-url的值.

優化
函數節流

//滾動執行
var timer = 0;
        $(window).on("scroll", function () {
            clearTimeout(timer);
            setTimeout(function () {
                loading();
            },150)
        });

如何判斷元素是否在可視區域
方法一

// post 距離屏幕頂端的 距離
var post = $("img").offset().top - $(window).scrollTop(); 
// posb  距離屏幕頂端的距離 + 自身的高度
var posb = post + o.height();
// 屏幕高度
var  contHeight= $(window).height();

if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
  // 在當前屏幕內
}else{
  // 不在當前屏幕內
}




方法二

getBoundingClientRect()


var rectObject = object.getBoundingClientRect();


這個方法返回一個名為ClientRect的DOMRect對象，包含了top、right、botton、left、width、height這些值。




可以看出返回的元素位置是相對于左上角而言的，而不是邊距。


我們思考一下，什么情況下圖片進入可視區域。


假設const bound = el.getBoundingClientRect();來表示圖片到可視區域頂部距離；
并設 const clientHeight = window.innerHeight;來表示可視區域的高度。


隨著滾動條的向下滾動，bound.top會越來越小，也就是圖片到可視區域頂部的距離越來越小，當bound.top===clientHeight時，圖片的上沿應該是位于可視區域下沿的位置的臨界點，再滾動一點點，圖片就會進入可視區域


function isInSight(el) {
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  //如果只考慮向下滾動加載
  //const clientWidth = window.innerWeight;
  return bound.top <= clientHeight + 100; // +100 預加載
}

方法三

IntersectionObserver  — 交叉觀察器"


const io = new IntersectionObserver(ioes => {
    console.log(ioes);
    ioes.forEach(ioe => {
        const el = ioe.target;
        // intersectionRatio 目標元素的可見比例
        const intersectionRatio = ioe.intersectionRatio;
        if (intersectionRatio > 0 && intersectionRatio)
        {
            // 出現在視口
            io.unobserve(el);
        }
    });
});

io.observe($("img")[4]);


var options = {
    root: null,  //如果root參數指定為null或者不指定的時候默認使用瀏覽器視口做為root。
    rootMargin: "0px", 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
  console.log(11111)
};
var observer = new IntersectionObserver(callback, options);


// 開始觀察
io.observe(document.getElementById("example"));

// 停止觀察
io.unobserve(element);

// 關閉觀察器
io.disconnect();


IntersectionObserver是瀏覽器原生提供的構造函數，接受兩個參數：callback是可見性變化時的回調函數，option是配置對象（該參數可選）。


callback函數有2個參數;


參數一: entries .


A list of IntersectionObserverEntry objects(IntersectionObserverEntry對象的列表). 內容如下





屬性
描述





time
可見性發生變化的時間，單位為毫秒




rootBounds
與getBoundingClientRect()方法的返回值一樣




boundingClientRect
目標元素的矩形區域的信息




intersectionRect
目標元素與視口（或根元素）的交叉區域的信息




intersectionRatio
目標元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0




target
被觀察的目標元素，是一個 DOM 節點對象






參數2— observer


root


如果root參數指定為null或者不指定的時候默認使用瀏覽器視口做為root。


rootMargin  


root元素的外邊距。類似于css中的 margin 屬性，比如 "10px 20px 30px 40px" (top, right, bottom, left)。如果有指定root參數，則rootMargin也可以使用百分比來取值。該屬性值是用作root元素和target發生交集時候的計算交集的區域范圍，使用該屬性可以控制root元素每一邊的收縮或者擴張。默認值為0。


threshold


可以是單一的number也可以是number數組，target元素和root元素相交程度達到該值的時候IntersectionObserver注冊的回調函數將會被執行。如果你只是想要探測當target元素的在root元素中的可見性超過50%的時候，你可以指定該屬性值為0.5。如果你想要target元素在root元素的可見程度每多25%就執行一次回調，那么你可以指定一個數組[0, 0.25, 0.5, 0.75, 1]。默認值是0(意味著只要有一個target像素出現在root元素中，回調函數將會被執行)。該值為1.0含義是當target完全出現在root元素中時候 回調才會被執行。

兼容性


Chrome 51+（發布于 2016-05-25）


Android 5+ （Chrome 56 發布于 2017-02-06）


Edge 15 （2017-04-11）


iOS 不支持




WICG 提供了一個 polyfill






?

?

6+

?

7+

?





 
 
 
 
 
 
 




注意點

IntersectionObserver API 是異步的，不隨著目標元素的滾動同步觸發。


規格寫明，IntersectionObserver的實現，應該采用requestIdleCallback()，即只有線程空閑下來，才會執行觀察器。這意味著，這個觀察器的優先級非常低，只在其他任務執行完，瀏覽器有了空閑才會執行。

參考

http://www.ruanyifeng.com/blo...
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90500.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    圖片的預加載和懶加載
    
                                                     
    摘要：圖片的預加載是提升用戶體驗而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個結合起來放到程序中是一種不錯的選擇。

最近在做H5滑頁時，遇到一些比較大的場景，動輒二十、三十頁，而圖片更是可恨的能達到上百個，所以就會導致場景在加載的時候遇到網速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能導致一部分的用戶沒有耐心，而丟失這部分用戶，于是就有了這里的圖片的預加載和懶加載，記個...
    
                                                   
                          
    
                                
    
                                    SwordFly
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    手摸手-100行代碼自己動手寫個功能完整的圖片懶加載插件
    
                                                     
    摘要：景科同學的想法很簡單，因為本人目前還是一個前端小白，只有通過不斷的寫，不斷的學，在與的相愛相殺中才能更快速的進步。本項目是景科同學自寫自測，雖然比較簡單，但是不保證沒有隱藏的。所以如果看官同學發現還望留言指正，景科同學在此以示感謝。

showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630);
本文...
    
                                                   
                          
    
                                
    
                                    CompileYouth
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    淘寶新勢力周H5性能優化實戰
    
                                                     
    摘要：前言淘寶新勢力周春上新是命運石鏈路鏈路第一次承接級大促，面對級大促內容豐富且復雜的頁面需求，鏈路遇到了一些性能問題，在未進行性能優化之前，搭建出來的頁面，業務方普遍反饋頁面卡頓嚴重，無法滑動。

前言
淘寶新勢力周（春上新）是命運石kimi鏈路（H5鏈路）第一次承接S級大促，面對S級大促內容豐富且復雜的頁面需求，kimi鏈路遇到了一些性能問題，在未進行性能優化之前，搭建出來的頁面，業務方...
    
                                                   
                          
    
                                
    
                                    Lionad-Morotar
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    懶加載和預加載
    
                                                     
    摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。

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

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

一、懶加載
1.什么是懶加載
showImg(https://segmentfault.com/img/remote/1460000016666819);
懶加載也...
    
                                                   
                          
    
                                
    
                                    hedzr
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    













<