预加载+懒加载-demo展示

2016-03-26

Word count: 883 | Reading time≈ 4 min

预加载&&懒加载-demo展示

一预加载

html

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>预加载</title>
    <style type="text/css">
        #box{
            width: 800px;
            }

    </style>
    </head>
    <body>
    <div id="box"></div>
</body>

步骤：

// 步骤：1 存一组图片到数组中

// 2 因为需要先将图片一张张加载，所以需要利用for循环。

// 3 图片加载前，需要先新建一个图片对象，和图片路径

// 4 每次新建一张图片对象，获取一个图片路径，进行加载（在此，利用index++实现每次加载下一张)

// 5 加载后，将图片存到一盒新的空数组中。

// 6 将数组添加到HTML文档的元素中

js:

//图片
var imgarr=["http://d.hiphotos.baidu.com/image/h%3D200/    sign=2a5a59df74094b36c4921ced93cd7c00/18d8bc3eb13533fa997c342eaad3fd1f40345be3.jpg","http://g.hiphotos.baidu.com/image/pic/item/5882b2b7d0a20cf4c7e9bd9973094b36acaf997f.jpg","http://e.hiphotos.baidu.com/image/h%3D200/sign=c6fd3ae21d178a82d13c78a0c602737f/4e4a20a4462309f7d4896d3c710e0cf3d7cad63e.jpg","http://g.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9338e2370bcaf4bd11372f00171.jpg","http://f.hiphotos.baidu.com/image/pic/item/f11f3a292df5e0fe8429ca47596034a85edf7246.jpg","http://g.hiphotos.baidu.com/image/pic/item/08f790529822720e62e61b4e7ecb0a46f21fab5e.jpg","http://g.hiphotos.baidu.com/zhidao/pic/item/267f9e2f07082838e161fffabd99a9014d08f1f4.jpg"];



var index=0;
var arr=[];
for (var i = 0; i < imgarr.length; i++) {
var newobj=new Image();
newobj.src=imgarr[i];
newobj.onload=function(){
index++;
arr.push(this); // this指代的是事件的主体，也就是newobj, 而事件的主体我们一般可以用this来指代
// 当index++ 大于我们的imgarr.length时候，也就是加载完成的时候，加载条应该显示100%；
if (index>=imgarr.length) {
box.innerHTML=Math.ceil(index/imgarr.length*100)+"%";
loadingover(); }  }  }

function loadingover(){
    box.innerHTML="";

    for (var i = 0; i < arr.length; i++){
    box.appendChild(arr[i]);   }  }

二懒加载

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延时加载</title>
    <style type="text/css">
    #div1{border:1px red solid;
               width: 80%;
               position: absolute;
               top: 500px;
               }
    #div2{border:1px red solid;
    width: 80%;
    position: absolute;
    top: 2000px;
    }
    #div3{
    border:1px red solid;
    width: 80%;
    position: absolute;
    top: 3000px;
    }
    img{
    /*img需要给定宽*/
    width: 600px;    
    height: 400px;
    }
    </style>
    </head>
    <body>
    <div class="big" id="div1"><img c="../img/18.jpg"></div>
    <div class="big" id="div2"><img c="../img/19.jpg"></div>
    <div class="big" id="div3"><img c="../img/20.jpg"></div>
</body>
</html>

var img=document.getElementsByTagName('img');

// 图片在定位时，要找到元素最外层定位的父元素，并获取这两个元素之间的高度，一个网页会有很多个延时加载的元素，所以，可以用函数传参来封装函数。
function offset(element){
var t=element.offsetTop;
// 因为不知道子元素外有多少父级，利用while循环来获取子元素到最外层元素间的高度
 while(element){
 t+=element.offsetTop;
 element=element.offsetParent; //让参数element一级一级往上，直到element没有定位的父级为止，此时，while里的element条    件为假，循环停止，得到最后的t值
 }
 return {top:t} // 返回t值 这里的top 是一个对象，我们可以随便定义对象名
 }
// 寻找执行条件 并执行要达到的效果
window.onscroll=function(){
var scrolltop=document.body.scrollTop||document.documentElement.scrollTop;
var ch=document.documentElement.clientHeight;
// 循环每一张图片
for (var i = 0; i < img.length; i++) {
//通过传参获取img的offsetHeight
var oh=offset(img[i]).top;
// if 判断条件 来判断图片在什么时候加载
if (oh<scrolltop+ch-200) {
img[i].src=img[i].getAttribute("c");
}
}
}
</script>

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.