关于图片延迟加载技术-ImageLazyLoad
2014-12-25 14:38
369 查看
最近做的项目遇到图片比较多的网页展示,发现图片加载比较慢,网上找了一下关于图片延迟加载的资料,mark一下。
------------------------------------------
关于图片延迟加载技术的优点与缺点
因为工作需要所以最近研究了一下淘宝、QQ、拍拍等几个大型网站的图片延迟加载技术!所以与大家分享一下,仅是代表我的个人观点
图片延迟加载技术(ImageLazyLoad),在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可是界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
使用此技术的网站有太多太多,如淘宝,还有一些动漫网站,眼下比较常用的图片延迟加载技术有四种:kissy(淘宝的JS框架),Jquery 图片延迟插件,Prototype,YUI 2。
YUI的图片延迟技术是就成熟的,Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术(Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac),闲话不说,一起来看看如何使用。
下面的例子可直接粘贴到html文件中运行
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致;
但做为技术而言没有十全十美的技术,缺点也是有的:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的朋友要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用 ImageLazyLoad。
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=88【关于图片延迟加载技术-ImageLazyLoad】幸凡学习网
------------------------------------------
关于图片延迟加载技术的优点与缺点
因为工作需要所以最近研究了一下淘宝、QQ、拍拍等几个大型网站的图片延迟加载技术!所以与大家分享一下,仅是代表我的个人观点
图片延迟加载技术(ImageLazyLoad),在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可是界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
使用此技术的网站有太多太多,如淘宝,还有一些动漫网站,眼下比较常用的图片延迟加载技术有四种:kissy(淘宝的JS框架),Jquery 图片延迟插件,Prototype,YUI 2。
YUI的图片延迟技术是就成熟的,Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术(Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac),闲话不说,一起来看看如何使用。
下面的例子可直接粘贴到html文件中运行
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js延时加载</title> <script type="text/javascript"> lazyLoad = (function () { var map_element = {}; var element_obj = []; var download_count = 0; var last_offset = -1; var doc_body; var doc_element; var lazy_load_tag; function initVar(tags) { doc_body = document.body; //判断是否为IE的"怪异模式" doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement; lazy_load_tag = tags || ["img", "iframe"]; }; function initElementMap() { //var all_element = []; //从所有相关元素中找出需要延时加载的元素 for (var i = 0, len = lazy_load_tag.length; i < len; i++) { var el = document.getElementsByTagName(lazy_load_tag[i]); for (var j = 0, len2 = el.length; j < len2; j++) { if (typeof (el[j]) == "object" && el[j].getAttribute("lazy_src")) { element_obj.push(el[j]); } } } for (var i = 0, len = element_obj.length; i < len; i++) { var o_img = element_obj[i]; var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离 if (map_element[t_index]) { map_element[t_index].push(i); } else { //按距上距离保存一个队列 var t_array = []; t_array[0] = i; map_element[t_index] = t_array; download_count++; //需要延时加载的图片数量 } } }; function initDownloadListen() { if (!download_count) return; var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop; //可视化区域的高=offtset+document的高 var visio_offset = offset + doc_element.clientHeight; if (last_offset == visio_offset) { setTimeout(initDownloadListen, 200);//每隔0.2秒检测一次,这玩意儿感觉有些耗资源的 return; } last_offset = visio_offset; var visio_height = doc_element.clientHeight; var img_show_height = visio_height + offset; for (var key in map_element) { if (img_show_height > key) { var t_o = map_element[key]; var img_vl = t_o.length; for (var l = 0; l < img_vl; l++) { element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src"); } delete map_element[key]; download_count--; } } setTimeout(initDownloadListen, 200); }; function getAbsoluteTop(element) { if (arguments.length != 1 || element == null) { return null; } var offsetTop = element.offsetTop; while (element = element.offsetParent) { offsetTop += element.offsetTop; } return offsetTop; } function init(tags) { initVar(tags); initElementMap(); initDownloadListen(); }; return { init: init } })(); </script> <style type="text/css"> img{height:320px} </style> </head> <body> <div> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0910.jpg " /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0911.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0912.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0913.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0915.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0916.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0917.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0918.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0919.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0920.jpg" /><br/> <img lazy_src="http://i1173.photobucket.com/albums/r595/charrysong/time/0921.jpg" /><br/> </div> <script type="text/javascript"> lazyLoad.init(); </script> </body> </html>
LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把LazyLoad技术运用的淋漓尽致;
但做为技术而言没有十全十美的技术,缺点也是有的:
1.与Ajax技术的冲突;
2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题;
3.写代码不规范的朋友要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用 ImageLazyLoad。
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=88【关于图片延迟加载技术-ImageLazyLoad】幸凡学习网
相关文章推荐
- 关于图片延迟加载技术-ImageLazyLoad
- JavaScript——图片延迟加载技术(ImageLazyLoad)
- ionic图片资源懒加载,延迟加载—— ionic-image-lazy-load
- jquery.lazyload 插件实现图片延迟加载
- jquery插件实现图片延迟加载 -- jquery.lazyload
- Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
- 图片延迟加载 jQuery.lazyload
- jquery.lazyload 插件实现图片延迟加载
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- Jquery.LazyLoad.js实现图片延迟加载功能
- jquery.lazyload.js图片延迟加载
- jQuery插件:Image lazy loader图片延迟加载
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jquery.lazyload 实现图片延迟加载jquery插件(转自http://www.jb51.net/article/21987.htm)
- jquery插件实现图片延迟加载 -- jquery.lazyload
- (转)jQuery插件:Image lazy loader图片延迟加载
- jquery.lazyload.js 图片延迟加载
- jQuery.lazyload图片延迟加载详解
- jquery插件实现图片延迟加载(lazyload.js)