延时加载

延时加载，在大量数据加载的时候，会影响整个页面加载的速度，为了提高速度，使用延时加载是非常好的选择，下面将介绍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;
}
}
}
}

最后

以上就是顺心电灯胆为你收集整理的延时加载的全部内容，希望文章能够帮你解决延时加载所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。