网页图片延时加载技术

当一个网站访问量过大时,过多的图片展示往往会影响其网页的加载速度,过多没用的图片加载既影响用户体验,又会增加服务器的负载,可以说有百害而无一利。相信做前端的人都知道“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

当然,你还可以作出更为友好的方案,如,当浏览器在异步加载图片时候用展示加载提示栏,加载失败提示用户或者自动重新加载等等。

发表回复

评论列表:

mr
mr
感谢分享,转走啦~
回复此留言
Shutdown
Shutdown
感谢分享,非常不错!
回复此留言
Hito
Hito
我没有找到用JS直接清空浏览器缓存的方法,但是有其它替代的方法可以实现,比如原来的图片是space.jpg,当你每次请求时,在space.jpg后面加个查询就可以了,如space.jpg?1。 推荐使用时间戳(用getTime()方法),就不会重复了。@缓存
回复此留言
缓存
缓存
应该是 那么如何通过JS清空缓存,让浏览器重新加载呢?
回复此留言
缓存
缓存
楼主问你个问题: 浏览器加载过一次图片,第二次加载的时候是加载的本地的缓存,那么如果通过JS清空缓存,让浏览器重新加载呢?
回复此留言