延时加载,在大量数据加载的时候,会影响整个页面加载的速度,为了提高速度,使用延时加载是非常好的选择,下面将介绍4中延时加载内容的方式。
本文中重点难点: 1.offsetLeft:距离父级容器的left值 2.offsetTop:距离父级容器的top值 以上两点注意,要看父级是否存在定位,如果存在定位则相对父级计算,如果不存在定位,则继续向上找,直到找到具有定位的容器做相对位置的计算。 3.clientLeft:left边框的值 4.clientTop:top边框的值 5.document.documentElement.scrollTop||document.body.scrollTop:兼容性处理 6.比对当前元素是否显示在页面上,如果完全显示则加载,如果未显示,则不加载 7.动态创建Image对象 8.闭包
1.文本信息延时加载
html代码: <div> 你还没看到全部的我 </div>
css代码: <style> div { width: 500px; height: 200px; background-color: aqua; margin-top: 1000px; } </style>
js代码: function offSet(ele) { var l = ele.offsetLeft; var t = ele.offsetTop; var div = ele.offsetParent; l += div.offsetLeft + div.clientLeft; t += div.offsetTop + div.clientTop; return {left: l, top: t}; } var text = document.getElementsByTagName("div").item(0); var h = offSet(text).top + text.offsetHeight; window.onscroll = function () { var winBottom = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight); if (h < winBottom) { text.innerHTML = "我被改变了"; } }
2.区域延时加载
html代码: <div class="d1"> </div> <div class="d2"> </div> <div class="d3"> </div>
css代码: <style> div { width: 100%; height: 500px; margin-bottom: 10px; } </style>
js代码: function offSet(ele) { var l = ele.offsetLeft; var t = ele.offsetTop; var div = ele.offsetParent; l += div.offsetLeft + div.clientLeft; t += div.offsetTop + div.clientTop; return {left: l, top: t}; } var d1 = document.getElementsByTagName("div"); var h = offSet(d1[0]).top + d1[0].offsetHeight; d1[0].style.backgroundColor = "red"; window.onscroll = function () { var winBottom = (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight); for (var i = 1; i < d1.length; i++) { loadDiv(d1[i], winBottom); } }; function loadDiv(ele, winBottom) { var h = offSet(ele).top + ele.offsetHeight; if (h < winBottom) { ele.style.backgroundColor = "blue"; } }
3.单张图片延时加载
html代码: <img src="6.jpg" changeimg="http://www.wwtliu.com/images/img10.png"/>
css代码: <style> img{ display: block; height: 200px; margin-top: 1000px; } </style>
js代码: function offSet(ele){ var l = ele.offsetLeft; var t = ele.offsetTop; var div = ele.offsetParent; l+=div.offsetLeft+div.clientLeft; t+=div.offsetTop+div.clientTop; return {left:l,top:t}; } var imgele = document.getElementsByTagName("img").item(0);//itme(0) [0] var h = offSet(imgele).top+imgele.offsetHeight; //事件触发 window.onscroll = function(){ var winBottom = (document.documentElement.scrollTop||document.body.scrollTop)+(document.documentElement.clientHeight||document.body.clientHeight); console.log(imgele.loaded); if (!imgele.loaded) { //imgele.loaded !undefined = true; if (h < winBottom) { var img = imgele.getAttribute("changeimg"); console.log(img); imgele.src = "dengdai.gif"; var waitingimg = new Image;//动态创建一个img标签 waitingimg.src = img; waitingimg.onload = function () {//图片完全加载完毕之后进行触发 imgele.src = img; imgele.loaded = true; } } } }
4.多张图片延时加载
html代码: <p>我是内容区域</p> <img src="6.jpg" changeimg="http://www.wwtliu.com/images/img10.png"/> <img src="6.jpg" changeimg="http://www.wwtliu.com/images/img49.png"/> <img src="6.jpg" changeimg="http://www.wwtliu.com/images/img50.png"/>
css代码: <style> img{ display: block; height: 200px; } p{ margin-bottom: 1000px; } </style>
js代码: function offSet(ele){ var l = ele.offsetLeft; var t = ele.offsetTop; var div = ele.offsetParent; l+=div.offsetLeft+div.clientLeft; t+=div.offsetTop+div.clientTop; return {left:l,top:t}; } var imgele = document.getElementsByTagName("img");//itme(0) [0] //事件触发 window.onscroll = function(){ var winBottom = (document.documentElement.scrollTop||document.body.scrollTop)+(document.documentElement.clientHeight||document.body.clientHeight); for(var j=0;j<imgele.length;j++) { var ele = imgele.item(j); loadImg(ele,winBottom); } }; function loadImg(ele,winBottom){ var h = offSet(ele).top+ele.offsetHeight; if (!ele.loaded) { if (h < winBottom) { var img = ele.getAttribute("changeimg"); ele.src = "dengdai.gif"; var waitingimg = new Image;//动态创建一个img标签 waitingimg.src = img; waitingimg.onload = function () {//图片完全加载完毕之后进行触发 ele.src = img; ele.loaded = true; } } } }