延时加载，在大量数据加载的时候，会影响整个页面加载的速度，为了提高速度，使用延时加载是非常好的选择，下面将介绍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代码：
你还没看到全部的我
css代码：
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代码：
css代码：
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代码：
css代码：
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代码：
我是内容区域
css代码：
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
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
