im110的专栏

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

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

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

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

2、sprite.gif是从土豆网上下载的,地址: 这是一张小到几乎没有的图片。

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

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

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

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

如果雨后还是雨,如果忧伤过后还是忧伤,

im110的专栏

相关文章:

你感兴趣的文章:

标签云: