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