图片懒加载原理-实例二
生活随笔
收集整理的這篇文章主要介紹了
图片懒加载原理-实例二
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
接著上面做一下補充：
1、dataset的用法，與attribute的區(qū)別
2、獲取圖片到頁面頂部高度的正確方法
3、怎樣處理已經(jīng)顯示的圖片重復遍歷的問題
4、 scroll事件的觸發(fā)頻率很快，怎么減小其處理函數(shù) 的調(diào)用頻率
與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)的父級元素
已加載的圖片不再遍歷
var img = document.getElementsByTagName('img'),n = 0; function lazyLoad() {var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);for (var i = n; i < img.length; i++) {if (getTop(img[i]) < top) {setSrc(img[i]);n=i;}} }最終效果：
<!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發(fā)現(xiàn)還有一個問題沒有處理：?scroll事件的觸發(fā)頻率很快，怎么減小其處理函數(shù) 的調(diào)用頻率，請看下一篇節(jié)流函數(shù)的介紹
轉(zhuǎn)載于:https://www.cnblogs.com/aredleave/p/7573166.html
總結(jié)
以上是生活随笔為你收集整理的图片懒加载原理-实例二的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android IllegalState
- 下一篇： 类函数宏