js 圖片懶加載的實(shí)現(xiàn)
1.使用場(chǎng)景
當(dāng)網(wǎng)頁(yè)上有大量圖片需要加載時(shí),如果一次性將圖片全部加載完,網(wǎng)頁(yè)加載時(shí)間會(huì)過(guò)長(zhǎng);
網(wǎng)頁(yè)本身已經(jīng)反應(yīng)很慢了,如果你的頁(yè)面上又需要引用圖片,這時(shí)候同樣是雪上加霜。
2.圖片懶加載原理
圖片懶加載,只不過(guò)是叫法比較高大上而已,其實(shí)現(xiàn)方式很簡(jiǎn)單,就是在需要的時(shí)候再給圖片的src屬性賦值,僅此而已。
3.代碼實(shí)現(xiàn)
/** * 圖片懶加載 */ function ImgLazyLoad() { /** * 滾動(dòng)到圖片所在位置再加載 * @param imgId * 懶加載圖片的ID * @param imgSrc * 懶加載圖片的地址 * @param distance * 圖片的可視距離(這個(gè)參數(shù)可以不傳) */ this.scrollLoad = function(imgId,imgSrc,distance) { // 獲取該圖片的src var img_source = $('#' + imgId).attr('src'); // 只執(zhí)行一次 if("" == img_source) { // 不滾動(dòng)的情況下,網(wǎng)頁(yè)的可見(jiàn)高度 var documentClientHeight = document.documentElement.clientHeight || window.innerHeight; // 獲取該圖片距離網(wǎng)頁(yè)頂部的距離 var imgOffsetTop = $('#' + imgId)[0].offsetTop; // 獲取網(wǎng)頁(yè)的可見(jiàn)高度 // var bodyClientHeight = document.body.clientHeight; // 1.網(wǎng)頁(yè)高度<小于網(wǎng)頁(yè)可視區(qū)域的高度(imgOffsetTop < documentClientHeight),就不會(huì)發(fā)生滾動(dòng)事件 if (imgOffsetTop < documentClientHeight) { $('#' + imgId)[0].src = imgSrc; return; } // 獲取屏幕高度 //var screenHeight = window.screen.height; // 圖片距離網(wǎng)頁(yè)左上角的縱向偏移距離(距離網(wǎng)頁(yè)頂部的距離) var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top; // ie下帶有小數(shù),所以只取整數(shù) max_imgClientTop = parseInt(max_imgClientTop); // 圖片可視距離(還差多少可以被看見(jiàn)) var max_imgClientDistance = max_imgClientTop - documentClientHeight; //0<= distance <=max_imgClientDistance // 1.參數(shù)不存在時(shí),設(shè)值=0;(圖片剛從可視區(qū)域最底部出現(xiàn)時(shí),距離達(dá)到最小)distance→→Min=0 // 2.參數(shù)>網(wǎng)頁(yè)可見(jiàn)高度時(shí),設(shè)值=可視區(qū)域高度;(不滾動(dòng)時(shí),距離達(dá)到最大)distance→→Max=max_imgClientDistance,scrollTop=0 distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance; // 2.最大距離時(shí),無(wú)滾動(dòng) if (distance == max_imgClientDistance) { $('#' + imgId)[0].src = imgSrc; return; } // 頁(yè)面綁定滾動(dòng)事件 $(document).scroll(function(){ // 獲取網(wǎng)頁(yè)被卷高度 // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 距離網(wǎng)頁(yè)最頂部的距離 var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top; // 圖片的可視高度 var clientHeight = documentClientHeight - imgClientTop; // 到達(dá)指定距離差或者圖片已經(jīng)進(jìn)入視野范圍 if (-clientHeight <= distance || documentClientHeight >= imgClientTop) { $('#' + imgId)[0].src = imgSrc; } }); } }; /** * 通過(guò)單擊別的元素時(shí)再加載 * @param clickId * 被綁定單擊事件的頁(yè)面元素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() { // 實(shí)例化對(duì)象 var ill = new ImgLazyLoad(); // 調(diào)用 ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404); });
4.涉及知識(shí)點(diǎn)
網(wǎng)上也有很多實(shí)現(xiàn)方法,但是不能自定義設(shè)置加載圖片的時(shí)機(jī),為了實(shí)現(xiàn)這一點(diǎn),花了不少功夫才搞好。
代碼很短,但是涉及的知識(shí)點(diǎn)很多。
// 獲取的是網(wǎng)頁(yè)的可視區(qū)域的高度(不滾動(dòng)的情況下) document.documentElement.clientHeight || window.innerHeight // 獲取的是網(wǎng)頁(yè)的可見(jiàn)高度(除去隱藏元素的高度) document.body.clientHeight // 獲取的是顯示屏的高度 window.screen.height // 獲取網(wǎng)頁(yè)的被卷高度(ie下不支持前者獲取方式) document.body.scrollTop || document.documentElement.scrollTop // 獲取指定元素距離網(wǎng)頁(yè)頂部的距離(靜態(tài)死值) document.getElementById('#id').offsetTop document.getElementById('#id').getBoundingClientRect().top
以上就是js 圖片懶加載的實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于js 圖片懶加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript如何通過(guò)userAgent判斷幾個(gè)常用瀏覽器詳解
userAgent 屬性是一個(gè)只讀的字符串,聲明了瀏覽器用于 HTTP 請(qǐng)求的用戶(hù)代理頭的值,這篇文章主要給大家介紹了關(guān)于JavaScript如何通過(guò)userAgent判斷幾個(gè)常用瀏覽器的相關(guān)資料,需要的朋友可以參考下2021-06-06js傳遞數(shù)組參數(shù)到后臺(tái)controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺(tái)controller的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03JavaScript隨機(jī)打亂數(shù)組順序之隨機(jī)洗牌算法
這篇文章主要介紹了JavaScript隨機(jī)打亂數(shù)組順序之隨機(jī)洗牌算法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JS+CSS實(shí)現(xiàn)DIV層的展開(kāi)、收縮效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)DIV層的展開(kāi)、收縮效果,以?xún)蓚€(gè)完整實(shí)例介紹了JS控制DIV層的展開(kāi)、收縮效果,感興趣的小伙伴們可以參考一下2016-01-01JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹
這篇文章主要介紹了JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹,非常有參考價(jià)值,特此分享到腳本之家平臺(tái)供大家參考2016-05-05js cavans實(shí)現(xiàn)靜態(tài)滾動(dòng)彈幕
這篇文章主要為大家詳細(xì)介紹了js cavans實(shí)現(xiàn)靜態(tài)滾動(dòng)彈幕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用
這篇文章主要為大家介紹了TypeScript創(chuàng)建一個(gè)簡(jiǎn)單Web應(yīng)用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05JavaScript實(shí)現(xiàn)的圖片3D展示空間(3DRoom)
一般的平面效果,通過(guò)改變水平和垂直坐標(biāo)就能實(shí)現(xiàn),再加上深度,就能在視覺(jué)上的產(chǎn)生3D(三維)的效果。2010-10-10JavaScript函數(shù)的4種調(diào)用方法詳解
了解函數(shù)的調(diào)用過(guò)程有助于深入學(xué)習(xí)與分析JavaScript代碼。本文是JavaScript高級(jí)這個(gè)系列中的第三篇文章,主要介紹JavaScript中函數(shù)的四種使用形式2014-04-04