圖片懶加載

int64 發(fā)布于2019-08-21 18:28 / 1508人閱讀

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

[TOC]

圖片懶加載 什么是懶加載

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

解決方案

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

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

//滾動執(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();

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

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

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

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

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

function isInSight(el) {
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  //如果只考慮向下滾動加載
  //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 目標元素的可見比例
        const intersectionRatio = ioe.intersectionRatio;
        if (intersectionRatio > 0 && intersectionRatio)
        {
            // 出現(xiàn)在視口
            io.unobserve(el);
        }
    });
});

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

var options = {
    root: null,  //如果root參數(shù)指定為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);

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

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

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

參數(shù)一: entries .

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

屬性	描述
time	可見性發(fā)生變化的時間，單位為毫秒
rootBounds	與getBoundingClientRect()方法的返回值一樣
boundingClientRect	目標元素的矩形區(qū)域的信息
intersectionRect	目標元素與視口（或根元素）的交叉區(qū)域的信息
intersectionRatio	目標元素的可見比例，即intersectionRect占boundingClientRect的比例，完全可見時為1，完全不可見時小于等于0
target	被觀察的目標元素，是一個 DOM 節(jié)點對象

參數(shù)2— observer

root

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

rootMargin

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

threshold

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

兼容性

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

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

Edge 15 （2017-04-11）

iOS 不支持

WICG 提供了一個 polyfill

?	?	6+	?	7+	?

注意點

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

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

參考

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90500.html

發(fā)表評論

登陸后可評論

0條評論

int64

男|高級講師

我要關(guān)注我要私信

TA的文章

BREW 應(yīng)用中的SVG技術(shù)

閱讀 2764·2021-11-22 14:45
Netfront：自10月1日起啟用三區(qū)數(shù)據(jù)中心，互相支持備用，香港VPS云服務(wù)器/月付41元起

閱讀 916·2021-10-15 09:41
51單片機學(xué)習(xí)筆記001-----51單片機基礎(chǔ)構(gòu)造淺介紹

閱讀 1075·2021-09-27 13:35
LightNode：香港/臺灣/新加坡vps,亞洲多地機房;按小時計費,月付$7.71起,注冊最高送

閱讀 3699·2021-09-09 11:56
看到一種css實現(xiàn)圓角的方法

閱讀 2642·2019-08-30 13:03
【靜態(tài)頁面架構(gòu)】CSS之列表

閱讀 3203·2019-08-29 16:32
是時候擁有一個你自己的命令行工具了

閱讀 3312·2019-08-26 13:49
微信小游戲排行榜的原生顯示

閱讀 779·2019-08-26 10:35

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

圖片懶加載

相關(guān)文章

圖片的預(yù)加載和懶加載

手摸手-100行代碼自己動手寫個功能完整的圖片懶加載插件

淘寶新勢力周H5性能優(yōu)化實戰(zhàn)

懶加載和預(yù)加載

懶加載和預(yù)加載

懶加載和預(yù)加載

發(fā)表評論

0條評論

int64

男|高級講師

TA的文章

BREW 應(yīng)用中的SVG技術(shù)

Netfront：自10月1日起啟用三區(qū)數(shù)據(jù)中心，互相支持備用，香港VPS云服務(wù)器/月付41元起

51單片機學(xué)習(xí)筆記001-----51單片機基礎(chǔ)構(gòu)造淺介紹

LightNode：香港/臺灣/新加坡vps,亞洲多地機房;按小時計費,月付$7.71起,注冊最高送

看到一種css實現(xiàn)圓角的方法

【靜態(tài)頁面架構(gòu)】CSS之列表

是時候擁有一個你自己的命令行工具了

微信小游戲排行榜的原生顯示

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

圖片懶加載

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！