圖片懶加載是什么意思？圖片懶加載的完成方法
發(fā)表時(shí)間：2023-09-01 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于圖片懶加載是什么意思？圖片懶加載的實(shí)現(xiàn)方法，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。所謂懶加載，是為了提高網(wǎng)頁(yè)的打開(kāi)的速度，獲得更好用戶體驗(yàn)的一種手段。其選擇的重要的部分先加載，次要的部分需要的時(shí)候再加載。比如一個(gè)電商網(wǎng)站，首屏通常有很多的數(shù)據(jù)，...
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于圖片懶加載是什么意思？圖片懶加載的實(shí)現(xiàn)方法，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
所謂懶加載，是為了提高網(wǎng)頁(yè)的打開(kāi)的速度，獲得更好用戶體驗(yàn)的一種手段。其選擇的重要的部分先加載，次要的部分需要的時(shí)候再加載。比如一個(gè)電商網(wǎng)站，首屏通常有很多的數(shù)據(jù)，清晰度較高的 banner 或輪播。頁(yè)面非首屏部分會(huì)員很多商品夾雜著大量的圖片。這是時(shí)候選擇懶加載以保證首屏的流暢十分重要。
本文僅僅簡(jiǎn)單的舉例圖片的懶加載，是性能優(yōu)化的入門(mén)的篇章，方法比較簡(jiǎn)單明了，只要有一點(diǎn) js 基礎(chǔ)就一定能看懂。
廢話不多說(shuō)
<img src="img/pic_error.jpg" class="img-delay" src="img/banner.png" />
首先，對(duì)于非首屏的圖片添加了 class="img-delay" 和 src屬性，后者用來(lái)放置圖片原始 url 地址的屬性，對(duì)于圖片本身的 src 屬性，可以選擇空著，或者添加一個(gè)”圖片無(wú)法顯示“的提示性圖片，像天貓這樣：
之后我們需要做的就是，當(dāng)用戶下滑到哪里就顯示哪里的圖片（提前一點(diǎn)點(diǎn)顯示更好，這里不做提前了）
//首先你需要引入一個(gè) jQuery 庫(kù)
//獲取需要延遲加載的圖片
var $picDelay = $(".img-delay");
//在 window 上監(jiān)聽(tīng)滑動(dòng)事件
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(); //滑塊劃過(guò)的距離
var screenHeight = screen.height; //屏幕瀏覽器內(nèi)容部分的高度
//計(jì)算每個(gè)圖片的位置是否符合要求
$picDelay.each(function(idx, ele){
var $ele = $(ele);
//當(dāng)scrollTop + screenHeight === ele.offsetTop時(shí)圖片剛好出現(xiàn)上邊沿
if(scrollTop + screenHeight >= ele.offsetTop){
$ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
}
});
//當(dāng)所有圖片都加載了以后，移除這個(gè)事件
if($(".img-delay").length <= 0){
$(window).unbind("scroll");
}
});相關(guān)推薦：
細(xì)說(shuō)圖片懶加載以及預(yù)加載
php的curl抓取懶加載的圖片方法，求大神指點(diǎn)
以上就是圖片懶加載是什么意思？圖片懶加載的實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
