专注前端,专注网页设计制作 - (承接网页制作、设计) QQ:262817214 虚拟主机 域名注册 云主机 香港空间 | CSS3演示 | 站长工具 | 网页特效 | 网页模板 | 网页素材 | PSD素材 | 手机系统
广告加载中...
当前位置: 首页 > 网页设计 > Javascript > >文章

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

时间:2016-01-31 16:41点击: 次 【

 淘宝图片处理讨论

 
淘宝网页面很大,但是打开速度很快。其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载。但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部。
 
模仿淘宝,做滚动图片加载
 
我不知道淘宝网是如何做滚动加载的,但是我之前有篇文章,介绍了滚动加载,有兴趣的朋友可以去看下: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都合并压缩了,那我们的网站速度和性能会提升很多!
推荐文章
热门文章榜