为了账号安全,请及时绑定邮箱和手机立即绑定

javascript图片延时加载方法

在页面很长(超过3屏)且图片又很多时,默认情况下浏览器会加载所有图片,有可能导致第二屏的图片显示出来了,但第一屏的图片还在加载,这种情况最适合用"javascript延时加载"来改善用户体验.

原理:

1.根据图片元素距页面顶部的距离,判断图片自身在第几屏

2.所有图片元素的src值先不设置,改而用其它自定义属性,比如src写成lazy_src(这样浏览器就不会主动加载图片)

3.根据1的判断,如果轮到自己登场了(即到顶部的距离变化了,比如用户拉动滚动条了),则将lazy_src值赋值为src,这样浏览器就开始加载了.

代码:(收集于网上)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:800px}
    </style>
</head>
<body>
    <div>
    <img lazy_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474029890_big.jpg" /><br/>
    <img lazy_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474372951_big.jpg" /><br/>
    <img lazy_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://pic.vlike.com/girl/UploadFiles_9401/201005/06/2010050616595471474_big.jpg" /><br/>
    <img lazy_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051307474693772_big.jpg" /><br/>
    <img lazy_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://pic.vlike.com/girl/UploadFiles_9401/201005/05/2010050511370456961_big.jpg" /><br/>
    <img lazy_class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://pic.vlike.com/girl/UploadFiles_9401/201005/13/2010051311000442310_big.jpg" /><br/>
    </div>
    <script type="text/javascript">
        lazyLoad.init(); 
    </script>
</body>
</html>

注意事项:图片最好都用样式定义高度,否则图片的高度默认为0,就上面的例子来讲,所有img标签都挤在一起,全部在第一屏,导致程序认为它们都应该加载,就看不到效果了. 

另外这种方式有一个致命的缺点:如果浏览器禁用了javascript,将会失效!所以使用前请先考虑清楚,或者在页面上加一些提示(类似:“您的浏览器不支持javascript,页面显示可能不正常”之类)

附:firefox上快速禁用和启用javascript的方法

如上图所示,在firefox地址栏里输入about:config,找到javascript:enabled,双击可切换true或false(即:启用或禁用)

当然,园子里的高手还有一篇更强大的ImagesLazyLoad 图片延迟加载效果 推荐给想深入研究的朋友们看看。

此外,jQuery也一个专门实现延时加载的插件jQuery.lazyload,也很方便。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消