當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图片懒加载原理-实例二

發布時間：2025/3/21 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了图片懒加载原理-实例二小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

接著上面做一下補充：

1、dataset的用法，與attribute的區別

2、獲取圖片到頁面頂部高度的正確方法

3、怎樣處理已經顯示的圖片重復遍歷的問題

4、 scroll事件的觸發頻率很快，怎么減小其處理函數的調用頻率

與dataset和getAttribute

1、它是html5自定義屬性，低版本瀏覽器不兼容

2、html標簽中定義：data-屬性名，可設置多個

3、js中typeof img.dataset，值為object；

　　獲取所有自定義屬性：img.dataset

　　獲取某個屬性：img.dataset[屬性名]

　　添加某個屬性：img.dataset[屬性名]=值

　　刪除某個屬性：delete img.dataset.屬性名

4、與getAttribute和setAttribute相比，dataset更具語義化，代碼更簡潔

獲取圖片到頁面頂部高度的正確方法

function getTop(obj) {var h = 0;while (obj) {h += obj.offsetTop;obj = obj.offsetParent;}return h; }

?offsetParent(定位父級)的定義：與當前元素最近的非默認定位(position是static)的父級元素

已加載的圖片不再遍歷

最終效果：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.imgbox {width: 100%;min-height: 150px;margin: 20px 0;border: 1px solid red;}.imgbox img {width: 100%;}</style> </head> <body> <div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div> <div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"/></div> <div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div> <div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"/></div> <div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div> <div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div> <div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div> <div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div> <div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div> <div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div> <div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div> <div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div> <div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div> <div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div> <div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div> <div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div> <div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div> <div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div> <div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div> <div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div> <div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div> <div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div> <div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div> <div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div> <div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div> <div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div> <div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div> <div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div> <div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div> <div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div> <div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div> <div class="imgbox" style="position:relative"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div> <div class="imgbox" style="position:relative"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div> <div class="imgbox" style="position:relative"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div> <div class="imgbox" style="position:relative"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div> <div class="imgbox" style="position:relative"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div></body> <script>var img = document.getElementsByTagName('img');var n = 0;function getTop(obj) {var h = 0;while (obj) {h += obj.offsetTop;obj = obj.offsetParent;}return h;}function setSrc(imgNode){var src='';if (imgNode.dataset) {src=imgNode.dataset.src;} else {src=imgNode.getAttribute('data-src');}imgNode.src=src;}function lazyLoad() {var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);for (var i = n; i < img.length; i++) {console.log(top);if (getTop(img[i]) < top) {setSrc(img[i]);n=i;}}}window.onscroll = lazyLoad;window.onload=function () {window.onscroll();}</script> </html> View Code

發現還有一個問題沒有處理：?scroll事件的觸發頻率很快，怎么減小其處理函數的調用頻率，請看下一篇節流函數的介紹

轉載于:https://www.cnblogs.com/aredleave/p/7573166.html

總結

以上是生活随笔為你收集整理的图片懒加载原理-实例二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android IllegalState
下一篇：类函数宏