预加载和懒加载

2017-12-15

懒加载

懒加载就是判断图片是否出现在浏览器的可视窗口内，如果出现在该区域，就请求此图片。
需要的参数

  • 窗口的scrollTop和窗口的高度height

    1
    2
    3
    4
    5
    6
    7
    8
    //窗口的scrollTop值
    var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
    或者
    var scrollTop=$(window).scrollTop();
    //窗口的高度
    var height=document.body.offsetHeight || document.documentElement.offsetHeight;
    或者
    var height=$(window).height();

  • 图片距离整个网页顶部的距离offsetTop

    1
    var imgTop=img.offsetTop;

所需要的参数都计算好以后，就判断，元素是否出现在浏览器的可视窗口内。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
for(var i=0;i<14;i++){
	var li=document.createElement("li");
	li.innerHTML=`<a href="###">
					<img src="" alt="" src_data="./img/14.jpg"/>
				  </a>`;
	$("ul").append(li);
}
//图片开始请求的函数
function loadImg(scrollTop,height){
	var lis=$("ul li");
	for(var i=0;i<lis.length;i++){
		if(lis[i].offsetTop<(scrollTop+height)){
			var src=$(lis[i]).children("a").children("img").attr("src_data");
			$(lis[i]).children("a").children("img").attr("src",src);
		}
	}
}
window.onload=function(){
	var scrollTop=$(window).scrollTop();
	var height=$(window).height();
	loadImg(scrollTop,height);
}
window.onscroll=function(){
	var scrollTop=$(window).scrollTop();
	var height=$(window).height();
	loadImg(scrollTop,height);
}

结果如下图：
b.gif

预加载

在图片墙中，我们会把相同宽度，不同高度的图片放在一起，但是图片需要请求，没请求成功之前，我们获取不到它的高度，所以需要图片预加载。

  • 代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    html代码为：
    <style>
    	*{
    		margin:0;
    		padding:0;
    	}
    	.box{
    		min-width:280px;
    		position: relative;
    		margin:0 auto;
    	}
    	.box img{
    		width:270px;
    		position:absolute;
    	}
    </style>
    <div class="box"></div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    	var width=270;
    	var margin=10;
    	//图片进行预加载
    	var count=0;
    	var imgArr=[];
    	for(var i=0;i<14;i++){
    		var readyImg=new Image();
    		readyImg.src="./img/"+(i+1)+".jpg";
    		imgArr.push(readyImg);
    		imgArr.onload=function(){
    			count++;
    			if(count==14){
    				start();
    			}
    		}
    	}
    	//图片的生成
    	var isF=true;
    	var topArr=[];
    	function start(){
    		var cols=parseInt($(window).width()/(width+margin));
    		if(topArr.length==cols && cols!=0){
    			return;
    		}
    		topArr.length=cols==0?1:cols;
    		$(".box").width(cols*(margin+width));
    		for(var i=0;i<topArr.length;i++){
    			topArr[i]=0;
    		}
    		//生成图片
    		for(var j=0;j<14;j++){
    			var img=imgArr[j];
    			var minIndex=0;
    			for(var a=1;a<topArr.length;a++){
    				if(topArr[a]<topArr[minIndex]){
    					minIndex=a;
    				}
    			}
    			img.style.top=topArr[minIndex]+margin+'px';
    			img.style.left=minIndex*(margin+width)+'px';
    			if(isF){
    				$(".box").append(img);
    			}
    			topArr[minIndex]+=img.offsetHeight+margin;
    		}
    		isF=false;
    	}
    	//改变窗口大小时
    	window.onresize=function(){
    		start();
    	}
    </script>

结果如下图：
c.gif