当一个网站访问量过大时，过多的图片展示往往会影响其网页的加载速度，过多没用的图片加载既影响用户体验，又会增加服务器的负载，可以说有百害而无一利。相信做前端的人都知道“Ajax”，Ajax的核心是“按需异步加载”：当用户需要数据库时候，去服务器上拿数据，然后给用户展示出来，这样做的优点无疑是很多的。实际上，网页在加载图片时也会有类似Ajax的异步加载技术。
我们知道，浏览器在解析html文档时，遇到img标签的src属性就是用过get请求的方式，从服务器上获取图片，html中的img标签有多少，浏览器就会从服务器上获取多少个图片。图片的延时加载技术就从这个地方着手，把HTML文档中需要延时加载的img标签的src都指定成同一张图片，用过另外一个非标准的属性来指定图片的实际位置，如下：
<img src=”space.jpg” data=”reallyimg.jpg”/>
如果我的有10个img标签，实际上只需要下载一张图片占位符就可以了。那么接下来就是通过判断用户的一些操作也按需要显示图片。
这里说一个例子，一个HTML文档上部有一些文字介绍，下面有8张容量比较大的图片，它们并不在浏览器第一屏的视野里。因为不是所有人都会拉动浏览器的scroll，所以当网页加载的时候，我们完全没有必要把这8张大图加载出来，统一用图像占位符space.jpg。这时候我们判断，当用户拉动scroll，让这些图片显示在屏幕当中的时候，我们在来展示图片。其实我们只需要做两件事情：1，编写一个显示图片的函数；2，当发生window.onscroll事件时作出判断，如果当前图片在屏幕显示位置，则调用这个显示图片的函数。
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>图片延时加载技术(一)</title>
<meta name="author" content="Hito,vip@hioty.org"/>
<style>
* {margin:0;padding:0;}
img {border:none;}
ul,li {list-style:none}
.space {width:900px;height:700px;background:#ccc;margin:auto;text-align:center;
line-height:800px;color:white;font-size:80px}
ul {text-align:center;margin:10px auto;width:900px}
ul li {float:left;border:1px solid red;margin:10px}
ul li img {width:200px;}
</style>
<script>
function loadimg(obj){
var imgsrc=obj.getAttribute("data");
if(imgsrc){
obj.src=imgsrc;
obj.removeAttribute("data");}
else{
return false;
}
}
window.onscroll=function(){
var bodyheight=document.body.clientHeight;
var imgobj=document.getElementsByTagName("ul")[0].getElementsByTagName("img");
var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||
document.body.scrollTop;
for(var i=0;i<imgobj.length;i++){
if(imgobj[i].offsetTop-scrollTop<bodyheight){
loadimg(imgobj[i]);
}
}
}
</script>
</head>
<body>
<div class="space">这里是其它内容</div>
<ul>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/10.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/12.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/13.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/14.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/15.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/16.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/17.jpg"/></li>
<li><img src="space.jpg" data="http://www.trituradoras-de-roca.com/gallery/19.jpg"/></li>
</ul>
</body>
</html
当然，你还可以作出更为友好的方案，如，当浏览器在异步加载图片时候用展示加载提示栏，加载失败提示用户或者自动重新加载等等。
评论列表: