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