淘宝网滚动加载图片及刷新回顶部的做法讨论

3905次浏览

淘宝图片处理讨论

淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部。

模仿淘宝,做滚动图片加载

我不知道淘宝网是如何做滚动加载的,但是我之前有篇文章,介绍了滚动加载,有兴趣的朋友可以去看下:http://www.haorooms.com/post/js_jquery_lazyload_viewload

假如你想做成淘宝那样,你可以改进一下代码。

其实延迟加载的思路就是先把图片放在一个data-src或者一个属性中,当页面滑动到可视区域内时,把存起来的图片地址赋值给src就可以了。

这里我就不罗列代码了。

刷新回顶部

当我们做了可视区域加载的时候,通常让其刷新回到顶部。像淘宝那样。刷新回顶部。

我不知道淘宝网是如何做的。刷新回顶部,我用到的是onbeforeunload 事件。

关于onbeforeunload 事件,http://www.haorooms.com/post/js_close_llq ,这里我也有篇文章专门介绍。大家可以看下。刷新回顶部就是用这个事件,可以这么写。

window.onbeforeunload   =   function(){$(window).scrollTop(0);}

当网站所有的图片都用了可是区域加载,css和js都合并压缩了,那我们的网站速度和性能会提升很多!

假如你知道淘宝网的做法,或者其他更好的做法,欢迎留言交流!

Tags: js延迟加载

相关文章: