您好,登錄后才能下訂單哦!
html中圖片懶加載的實(shí)現(xiàn)方法?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
所謂懶加載,是為了提高網(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"); } });
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)html中圖片懶加載的實(shí)現(xiàn)方法大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。