网站图片延迟加载的实现
图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。
图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。
- <img src="images/placeholder.png" lazy-src="images/realimg.jpg" />
因为是使用javascript来加载图片,如果用户禁用了javascript,可以设置一个替代的方案。
- <img src="images/placeholder.png" lazy-src="images/realimg.jpg" alt="" />
- <noscript><img src="images/realimg.jpg" alt="" /></noscript>
页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow),计算出可视区域,当图片的位置出现在可视区域中,将src的值替换成真实的地址,此时图片就开始加载了。
当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器,那么也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的延迟加载。
下面是实现的代码,我写成了jQuery插件。
- (function( $ ){
- $.fn.imglazyload = function( options ){
- var o = $.extend({
- attr : 'lazy-src',
- container : window,
- event : 'scroll',
- fadeIn : false,
- threshold : 0,
- vertical : true
- }, options ),
- event = o.event,
- vertical = o.vertical,
- container = $( o.container ),
- threshold = o.threshold,
- // 将jQuery对象转换成DOM数组便于操作
- elems = $.makeArray( $(this) ),
- dataName = 'imglazyload_offset',
- OFFSET = vertical ? 'top' : 'left',
- SCROLL = vertical ? 'scrollTop' : 'scrollLeft',
- winSize = vertical ? container.height() : container.width(),
- scrollCoord = container[ SCROLL ](),
- docSize = winSize + scrollCoord;
- // 延迟加载的触发器
- var trigger = {
- init : function( coord ){
- return coord >= scrollCoord &&
- coord <= ( docSize + threshold );
- },
- scroll : function( coord ){
- var scrollCoord = container[ SCROLL ]();
- return coord >= scrollCoord &&
- coord <= ( winSize + scrollCoord + threshold );
- },
- resize : function( coord ){
- &
关键词:图片延迟加载
相关阅读
- 06-19解决IE7出现“网站安全证书有问题”方法
- 04-06绿色资源网教你制作自己收藏图片的QQ表情包安装包
- 04-01清除无用加载项 开机加速
- 01-12怎样提取Win7主题中的图片?
- 07-02怎样解决回收站图标无法实时更新的问题?
- 03-09网站服务器IIS“拒绝访问”设置
- 02-15“钓鱼网站”的四大“歪招”
- 10-02解决Windows 7网络延迟问题
- 04-10IIS 6.0 发布网站使用教程
- 04-04IIS6架设网站常见问题及症状答疑
阅读本文后您有什么感想? 已有 人给出评价!
用户评论
热门评论
最新评论
相关软件
热点图文
- 06-25js中文显示乱码或在页面显示乱码解决方法
- 06-25最简单的方法去掉iframe滚动条
- 06-25JS 获取上传文件大小的方法
- 12-31js技巧之清除表单所有内容
- 06-09网站图片延迟加载的实现
- 06-25JavaScript下拉菜单实例
- 06-25js判断是否是IE浏览器的几种方法
- 12-31W3C中使用的对联漂浮广告代码
- 06-25JavaScript日期格式转换
- 06-25js返回上一页方法示例