js实现图片的延迟加载

关注

原创最新推荐文章于 2024-03-08 09:43:36 发布 1.4w 阅读 AI 写同款· GEO 优化 ›

项目进展得差不多了，闲得蛋疼。开始关注各种高性能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">  </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"></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了，我扯完淡了，大家继续。