您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)js如何實現(xiàn)圖片懶加載,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
1.使用場景
當(dāng)網(wǎng)頁上有大量圖片需要加載時,如果一次性將圖片全部加載完,網(wǎng)頁加載時間會過長;
網(wǎng)頁本身已經(jīng)反應(yīng)很慢了,如果你的頁面上又需要引用圖片,這時候同樣是雪上加霜。
2.圖片懶加載原理
圖片懶加載,只不過是叫法比較高大上而已,其實現(xiàn)方式很簡單,就是在需要的時候再給圖片的src屬性賦值,僅此而已。
3.代碼實現(xiàn)
/** * 圖片懶加載 */ function ImgLazyLoad() { /** * 滾動到圖片所在位置再加載 * @param imgId * 懶加載圖片的ID * @param imgSrc * 懶加載圖片的地址 * @param distance * 圖片的可視距離(這個參數(shù)可以不傳) */ this.scrollLoad = function(imgId,imgSrc,distance) { // 獲取該圖片的src var img_source = $('#' + imgId).attr('src'); // 只執(zhí)行一次 if("" == img_source) { // 不滾動的情況下,網(wǎng)頁的可見高度 var documentClientHeight = document.documentElement.clientHeight || window.innerHeight; // 獲取該圖片距離網(wǎng)頁頂部的距離 var imgOffsetTop = $('#' + imgId)[0].offsetTop; // 獲取網(wǎng)頁的可見高度 // var bodyClientHeight = document.body.clientHeight; // 1.網(wǎng)頁高度<小于網(wǎng)頁可視區(qū)域的高度(imgOffsetTop < documentClientHeight),就不會發(fā)生滾動事件 if (imgOffsetTop < documentClientHeight) { $('#' + imgId)[0].src = imgSrc; return; } // 獲取屏幕高度 //var screenHeight = window.screen.height; // 圖片距離網(wǎng)頁左上角的縱向偏移距離(距離網(wǎng)頁頂部的距離) var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top; // ie下帶有小數(shù),所以只取整數(shù) max_imgClientTop = parseInt(max_imgClientTop); // 圖片可視距離(還差多少可以被看見) var max_imgClientDistance = max_imgClientTop - documentClientHeight; //0<= distance <=max_imgClientDistance // 1.參數(shù)不存在時,設(shè)值=0;(圖片剛從可視區(qū)域最底部出現(xiàn)時,距離達到最小)distance→→Min=0 // 2.參數(shù)>網(wǎng)頁可見高度時,設(shè)值=可視區(qū)域高度;(不滾動時,距離達到最大)distance→→Max=max_imgClientDistance,scrollTop=0 distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance; // 2.最大距離時,無滾動 if (distance == max_imgClientDistance) { $('#' + imgId)[0].src = imgSrc; return; } // 頁面綁定滾動事件 $(document).scroll(function(){ // 獲取網(wǎng)頁被卷高度 // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 距離網(wǎng)頁最頂部的距離 var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top; // 圖片的可視高度 var clientHeight = documentClientHeight - imgClientTop; // 到達指定距離差或者圖片已經(jīng)進入視野范圍 if (-clientHeight <= distance || documentClientHeight >= imgClientTop) { $('#' + imgId)[0].src = imgSrc; } }); } }; /** * 通過單擊別的元素時再加載 * @param clickId * 被綁定單擊事件的頁面元素ID * @param imgId * * @param imgSrc * 懶加載圖片的地址 */ // this.clickLoad = function(clickId,imgId,imgSrc) { // 獲取該圖片的src var img_source = $('#' + imgId).attr('src'); // 只執(zhí)行一次 if("" == img_source) { // 綁定單擊事件 $('#' + clickId).click(function(){ $('#' + imgId)[0].src = imgSrc; }); } }; };
調(diào)用:
$(function() { // 實例化對象 var ill = new ImgLazyLoad(); // 調(diào)用 ill.scrollLoad('aa','https://cache.yisu.com/upload/information/20201021/112/758.bmp',404); });
4.涉及知識點
網(wǎng)上也有很多實現(xiàn)方法,但是不能自定義設(shè)置加載圖片的時機,為了實現(xiàn)這一點,花了不少功夫才搞好。
代碼很短,但是涉及的知識點很多。
// 獲取的是網(wǎng)頁的可視區(qū)域的高度(不滾動的情況下) document.documentElement.clientHeight || window.innerHeight // 獲取的是網(wǎng)頁的可見高度(除去隱藏元素的高度) document.body.clientHeight // 獲取的是顯示屏的高度 window.screen.height // 獲取網(wǎng)頁的被卷高度(ie下不支持前者獲取方式) document.body.scrollTop || document.documentElement.scrollTop // 獲取指定元素距離網(wǎng)頁頂部的距離(靜態(tài)死值) document.getElementById('#id').offsetTop document.getElementById('#id').getBoundingClientRect().top
看完上述內(nèi)容,你們對js如何實現(xiàn)圖片懶加載有進一步的了解嗎?如果還想了解更多知識或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。