网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

关于图片延迟加载技术-ImageLazyLoad

用声音读出全文关注我吧
 2010/12/25 13:56:42 阅读次数:9492

关于图片延迟加载技术的优点与缺点

因为工作需要所以最近研究了一下淘宝、QQ、拍拍等几个大型网站的图片延迟加载技术!所以与大家分享一下,仅是代表我的个人观点

图片延迟加载技术(ImageLazyLoad),在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可是界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。

使用此技术的网站有太多太多,如淘宝,还有一些动漫网站,眼下比较常用的图片延迟加载技术有四种:kissy(淘宝的JS框架),Jquery 图片延迟插件,Prototype,YUI 2。

YUI的图片延迟技术是就成熟的,Jquery的图片延迟插件的设计灵感就来自于YUI的延迟技术(Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac),闲话不说,一起来看看如何使用。

<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。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭