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

js实现图片的延迟加载

2011-05-27 15:51 549 查看

项目进展得差不多了，闲得蛋疼。开始关注各种高性能WEB技术。看到一篇博客说土豆网的图片是延迟加载的。原理是这样：页面可见区域以下的图片先不加载，等到用户向下滚动到图片位置时，再进行加载。这样做的好处在哪里？——当页面有好几屏内容时，有可能用户只看前几屏的内容，这样我们就可以只加载用户需要看的图片，减少服务器向用户浏览器发送图片文件所产生的负荷。于是我打开了土豆网，没发现它的这种功能。但是一想，这确实是挺有意思的。这跟人人网的分批加载新鲜事的有异曲同工之妙，于是想自己coding实现一下。以下是偶的HTML和JS——在IE下简单测试过了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>lazyImage2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">-->

</head>

<body style="text-align:center" mce_style="text-align:center">
<p> </p><p> </p><p> </p><p> </p><p> </p>
<div style="height:1290px;width:800px;border:1px;background:gray;"></div>
<div style="height:150px;width:800px;border:1px;background:green;"></div>
<img class="lazy" src="images/sprite.gif" mce_src="images/sprite.gif" alt="images/lazyloadImg.jpg" />

<mce:script type="text/javascript"><!--
var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了）

window.onscroll = function() {
var imgElements = document.getElementsByTagName("img");
var lazyImgArr = new Array();
var j = 0;
for(var i=0; i<imgElements.length; i++) {
if(imgElements[i].className == "lazy"){
lazyImgArr[j++] = imgElements[i];
}
}

var scrollHeight = document.body.scrollTop;//滚动的高度
var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度
if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。

for(var k=0; k<lazyImgArr.length; k++) {
var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标）
if((imgTop - scrollHeight) <= bodyHeight) {
lazyImgArr[k].src = lazyImgArr[k].alt;
lazyImgArr[k].className = "notlazy"
}
}

temp = scrollHeight;
}

};

// --></mce:script>
</body>
</html>

简单说下思路：先在<img>标签中将src的值设置为一个极小的图片文件路径，alt属性的值设置为真正要显示的图片文件路径，当向下滚动到图片的位置时，将src的值替换为alt的值，这样就会自动加载真正要显示的图片了，同时，给标签设置一个值为lazy的class，加载完了之后，将其值设置为notlazy，以此来判断哪些图片需要加载，哪些不需要。

代码中的注释已经很清楚了，各位自己慢慢看吧。欢迎扔砖，更欢迎各种改进和完善的建议。

注意事项：1、页面中用到了两个图片文件，读者自己随便找来两张即可。在此我就不提供了。

2、sprite.gif是从土豆网上下载的，地址：http://css.tudouui.com/skin/__g/img/sprite.gif 这是一张小到几乎没有的图片。

3、请不要指责页面太丑陋，这不是关键。

4、我之所以定义那两块比便便还难看的DIV，是想让效果更清晰地展现。可以清晰地看到，第二个div全部可见以后，再向下滚动大图片就会自动加载。

不知道CSDN这个文本编辑器怎么整的，把我的<script>标签加了一个mce前缀，我的<p></p>中间有N多，也被它清除了。大家copy的时候记得自己修改一下。

O了，我扯完淡了，大家继续。

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

标签：

相关文章推荐

新的分享

章节导航