亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

圖片懶加載

int64 / 1543人閱讀

摘要：假設(shè)來(lái)表示圖片到可視區(qū)域頂部距離并設(shè)來(lái)表示可視區(qū)域的高度。可以是單一的也可以是數(shù)組，元素和元素相交程度達(dá)到該值的時(shí)候注冊(cè)的回調(diào)函數(shù)將會(huì)被執(zhí)行。默認(rèn)值是意味著只要有一個(gè)像素出現(xiàn)在元素中，回調(diào)函數(shù)將會(huì)被執(zhí)行。

[TOC]

圖片懶加載 什么是懶加載

懶加載其實(shí)就是延遲加載，是一種對(duì)網(wǎng)頁(yè)性能優(yōu)化的方式，比如當(dāng)訪問(wèn)一個(gè)頁(yè)面的時(shí)候，優(yōu)先顯示可視區(qū)域的圖片而不一次性加載所有圖片，當(dāng)需要顯示的時(shí)候再發(fā)送圖片請(qǐng)求，避免打開(kāi)網(wǎng)頁(yè)時(shí)加載過(guò)多資源。

解決方案 


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

優(yōu)化
函數(shù)節(jié)流

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

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

// 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)) {
  // 在當(dāng)前屏幕內(nèi)
}else{
  // 不在當(dāng)前屏幕內(nèi)
}




方法二

getBoundingClientRect()


var rectObject = object.getBoundingClientRect();


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




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


我們思考一下，什么情況下圖片進(jìn)入可視區(qū)域。


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


隨著滾動(dòng)條的向下滾動(dòng)，bound.top會(huì)越來(lái)越小，也就是圖片到可視區(qū)域頂部的距離越來(lái)越小，當(dāng)bound.top===clientHeight時(shí)，圖片的上沿應(yīng)該是位于可視區(qū)域下沿的位置的臨界點(diǎn)，再滾動(dòng)一點(diǎn)點(diǎn)，圖片就會(huì)進(jìn)入可視區(qū)域


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

方法三

IntersectionObserver  — 交叉觀察器"


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

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


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


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

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

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


IntersectionObserver是瀏覽器原生提供的構(gòu)造函數(shù)，接受兩個(gè)參數(shù)：callback是可見(jiàn)性變化時(shí)的回調(diào)函數(shù)，option是配置對(duì)象（該參數(shù)可選）。


callback函數(shù)有2個(gè)參數(shù);


參數(shù)一: entries .


A list of IntersectionObserverEntry objects(IntersectionObserverEntry對(duì)象的列表). 內(nèi)容如下





屬性
描述





time
可見(jiàn)性發(fā)生變化的時(shí)間，單位為毫秒




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




boundingClientRect
目標(biāo)元素的矩形區(qū)域的信息




intersectionRect
目標(biāo)元素與視口（或根元素）的交叉區(qū)域的信息




intersectionRatio
目標(biāo)元素的可見(jiàn)比例，即intersectionRect占boundingClientRect的比例，完全可見(jiàn)時(shí)為1，完全不可見(jiàn)時(shí)小于等于0




target
被觀察的目標(biāo)元素，是一個(gè) DOM 節(jié)點(diǎn)對(duì)象






參數(shù)2— observer


root


如果root參數(shù)指定為null或者不指定的時(shí)候默認(rèn)使用瀏覽器視口做為root。


rootMargin  


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


threshold


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

兼容性


Chrome 51+（發(fā)布于 2016-05-25）


Android 5+ （Chrome 56 發(fā)布于 2017-02-06）


Edge 15 （2017-04-11）


iOS 不支持




WICG 提供了一個(gè) polyfill






?

?

6+

?

7+

?





 
 
 
 
 
 
 




注意點(diǎn)

IntersectionObserver API 是異步的，不隨著目標(biāo)元素的滾動(dòng)同步觸發(fā)。


規(guī)格寫明，IntersectionObserver的實(shí)現(xiàn)，應(yīng)該采用requestIdleCallback()，即只有線程空閑下來(lái)，才會(huì)執(zhí)行觀察器。這意味著，這個(gè)觀察器的優(yōu)先級(jí)非常低，只在其他任務(wù)執(zhí)行完，瀏覽器有了空閑才會(huì)執(zhí)行。

參考

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

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90500.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    圖片的預(yù)加載和懶加載
    
                                                     
    摘要：圖片的預(yù)加載是提升用戶體驗(yàn)而損失性能的一種做法，而懶加載的性能就比較好了，所以將兩個(gè)結(jié)合起來(lái)放到程序中是一種不錯(cuò)的選擇。

最近在做H5滑頁(yè)時(shí)，遇到一些比較大的場(chǎng)景，動(dòng)輒二十、三十頁(yè)，而圖片更是可恨的能達(dá)到上百個(gè)，所以就會(huì)導(dǎo)致場(chǎng)景在加載的時(shí)候遇到網(wǎng)速比較慢的時(shí)候，用戶等待的時(shí)間特別長(zhǎng)，這樣的話，就有可能導(dǎo)致一部分的用戶沒(méi)有耐心，而丟失這部分用戶，于是就有了這里的圖片的預(yù)加載和懶加載，記個(gè)...
    
                                                   
                          
    
                                
    
                                    SwordFly
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    手摸手-100行代碼自己動(dòng)手寫個(gè)功能完整的圖片懶加載插件
    
                                                     
    摘要：景科同學(xué)的想法很簡(jiǎn)單，因?yàn)楸救四壳斑€是一個(gè)前端小白，只有通過(guò)不斷的寫，不斷的學(xué)，在與的相愛(ài)相殺中才能更快速的進(jìn)步。本項(xiàng)目是景科同學(xué)自寫自測(cè)，雖然比較簡(jiǎn)單，但是不保證沒(méi)有隱藏的。所以如果看官同學(xué)發(fā)現(xiàn)還望留言指正，景科同學(xué)在此以示感謝。

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

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

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

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

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

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<