您的位置：首页 > Web前端 > JavaScript

js图片预加载和图片懒加载

2016-11-13 21:58 246 查看

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

实现预加载常用方式是：new Image()。

Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var oImage=new Image();
var arr=[
'http://img7.yiihuu.com/990X524/upimg/works/2012/06/26/112417qyZ.jpg?auto=w',
'http://img05.tooopen.com/products/20140421/86777658.jpg',
'http://d04.res.meilishuo.net/pic/_o/68/e1/6b50f891e40dfbe88fd272c81581_570_455.c6.jpg_cef0a913_s1_q0_150_5_0_226_800.jpg',
'http://image.tuolar.com/img/uimg/201004/17/7/ztr7r1271502487_300.jpg',
'http://img1.touxiang.cn/uploads/20120609/09-034337_553.jpg',
'http://img05.tooopen.com/products/20140421/61637868.jpg'
]

var iCur=0;

preLoadImg();

function preLoadImg(){
oImage.src=arr[iCur];

oImage.onload=function(){
iCur++;
if (iCur<arr.length) {
preLoadImg();
}
document.title = iCur + ' / ' + arr.length;
}

}

var oImg=document.getElementById("img1");
var i=0;

oImg.onclick=function(){
i++;
if (i<arr.length) {
oImg.src=arr[i];
}

}

}
</script>
<body>
<img id="img1" src="http://img7.yiihuu.com/990X524/upimg/works/2012/06/26/112417qyZ.jpg?auto=w" />
</body>
</html>

懒加载也叫延迟加载：延迟加载图片或符合某些条件时才加载某些图片。

意义：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

可视区加载实现方式：即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离便开始加载，这样能保证用户拉下时正好能看到图片。

步骤：

1、网页中的图片，都设为同一张很小的图片（src=”img/white.JPG”）。

2、给图片增加 _src=”img/1.jpg” 的属性，保存这张图片的真实地址。

3、当滚动条到达用户可视区域后，将_src的属性值赋值给src。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#ul1{
width: 808px;
margin: 0 auto;
list-style: none;
}
#ul1 li{
float: left;
margin: 10px;
border: 1px solid olivedrab;
}
#ul1 li img
4000
{
width: 180px;
height: 180px;
}

</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("ul1");
var aImg=oUl.getElementsByTagName('img');
var iLen=aImg.length;

showImg();
window.onscroll=showImg;

function showImg(){
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

for (var i=0; i<iLen; i++) {
//!aImg[i]表示图片已经被加载过，则无需再加载
if ( !aImg[i].isLoad && getTop(aImg[i])<scrollTop+document.documentElement.clientHeight) {
aImg[i].src=aImg[i].getAttribute('_src');
aImg[i].isLoad=true;
}
}
}

//获取obj到页面上边框的绝对距离
function getTop(obj){
var iTop=0;
while(obj){
iTop+=obj.offsetTop;
obj=obj.offsetParent;
}
return iTop;
}

}
</script>
</head>
<body>
<ul id="ul1">
<li><img _src="img/2.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/2.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/2.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/2.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
<li><img _src="img/2.jpg" src="img/white.JPG"/></li>
<li><img _src="img/3.jpg" src="img/white.JPG"/></li>
<li><img _src="img/4.jpg" src="img/white.JPG"/></li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 预加载懒加载

相关文章推荐

新的分享

章节导航