首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js图片延迟加载的实现方法及思路

Posted in Javascript onJuly 22, 2013

大概的实现方式是：
在页面的load没有触发之前，把所有的指定id的元素内的img放入到imgs中，将所有的图片的src值放入到一个新建的_src属性中，把src设置为指定的显示图片。
然后，在document.body的scroll事件触发时，循环计算imgs中的img元素位置是否正好在浏览器显示框范围内，如果是，则将img元素的_src属性的值赋给src，这样图片就能显示出来。
这里比较麻烦地方是，如何计算img的位置，获得元素的相对于页面的绝对位置。通常是用offsetLeft和offsetTop，但这两个属性是元素的offsetParent指向的元素的相对位置， 如果offsetParent所指的元素是设置了浮动的或使用绝对定位，那么offsetLeft来获得绝对位置就不正确呢。
在这里我是将元素的所有父级元素的offsetTop之和来获得文档绝对位置的。

//取元素的页面绝对 X位置
        var getLeft = function(El){
            var left = 0;
            do{
                left += El.offsetLeft;
            }while((El = El.offsetParent).nodeName != 'BODY');
            return left;
        };
        //取元素的页面绝对 Y位置
        var getTop = function(El){
            var top = 0;
            do{
                top += El.offsetTop;
            }while((El = El.offsetParent).nodeName != 'BODY');
            return top;
        };

在设置窗口的scroll事件时，ie使用是document.documentElement，而其他的浏览器都使用document。
 接下来是要获得浏览器显示窗口现对于文档的位置，用了下面的代码来计算
//读取滚动条的位置和浏览器窗口的显示大小
             var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
                 left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
                 width = document.documentElement.clientWidth,
                 height = document.documentElement.clientHeight;

谷歌浏览器要通过body来获得scrollTop，而其他浏览器通过documentElement。
 最后迭代判断img的位置，并显示图片
//对所有图片进行批量判断是否在浏览器显示区域内
            for(var i=0 ; i < imgs.length; i++){
                var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
                //判断图片是否在显示区域内
                if( _top >= top &&
                    _left >= left &&
                    _top <= top+height &&
                    _left <= left+width){
                    var _src = imgs[i].getAttribute('_src');
                    //如果图片已经显示，则取消赋值
                    if(imgs[i].src !== _src){
                        imgs[i].src = _src;
                    }
                }
            }

可以运行的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>js图片延迟加载</title>
</head>
<body>
<table id="out1" style="height:2450px;">
<tr>
<td><img src="https://3water.com/small/2011_4_22/photo163115955184917.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_4_13/photo163175537548397.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_4_16/photo16314557927776.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_4_10/photo1631932180569094.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_4_1/photo1630540642223.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_4_2/photo1638657445827.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_29/photo16384188604.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_29/photo16384188604.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_4_13/photo16311444254618471.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_15/photo16318118126415.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_14/photo16310513957332.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_14/photo163103452142757.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16310310447460.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_14/photo163103347259334.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_14/photo163102333593532.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16323618120479.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_14/photo16323942409450.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_15/photo1630653584606.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_12/photo163233846816799.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_13/photo16313216736705.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="https://3water.com/small/2011_3_1/photo16313391752186220.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_1/photo163765186092776.jpg" alt="" /></td>
</tr>
</table>
<table id="out2" style="width:4883px">
<tr>
<td><img src="https://3water.com/small/2011_4_22/photo163115955184917.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_4_13/photo163175537548397.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_4_16/photo16314557927776.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_4_10/photo1631932180569094.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_4_1/photo1630540642223.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_4_2/photo1638657445827.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_29/photo16384188604.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_29/photo16384188604.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_4_13/photo16311444254618471.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_15/photo16318118126415.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_14/photo16310513957332.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_14/photo163103452142757.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16310310447460.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_14/photo163103347259334.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_14/photo163102333593532.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_14/photo16323618120479.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_14/photo16323942409450.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_15/photo1630653584606.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_12/photo163233846816799.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_13/photo16313216736705.jpg" alt="" /></td>
<td><img src="https://3water.com/small/2011_3_1/photo16313391752186220.jpg" alt="" /> </td>
<td><img src="https://3water.com/small/2011_3_1/photo163765186092776.jpg" alt="" /></td>
</tr>
</table>
</body>
</html>
  <script type="text/javascript">
        function delayload(option){
            //读取参数
            //图片未加载时显示的图片
            var src = option.src ? option.src : '',
            //指定那些id下的img元素使用延迟显示
                id = option.id ? option.id : [];
            //图片列表
            var imgs = [];
            //获得所有的图片元素
            for(var i=0 ; i < id.length ; i++){
                var idbox = document.getElementById(id[i]),_imgs;
                if(idbox && (_imgs = idbox.getElementsByTagName('img'))){
                    for(var t=0 ; t < _imgs.length ; t++){
                        imgs.push(_imgs[t]);
                    }
                }
            }
            //将所有的图片设置为指定的loading图片
            for(var i=0 ; i < imgs.length ; i++){
                //图片本来的图片路径放入_src中
                imgs[i].setAttribute('_src',imgs[i].src);
                imgs[i].src = src;
            }
            //取元素的页面绝对 X位置
            var getLeft = function(El){
                var left = 0;
                do{
                    left += El.offsetLeft;
                }while((El = El.offsetParent).nodeName != 'BODY');
                return left;
            };
            //取元素的页面绝对 Y位置
            var getTop = function(El){
                var top = 0;
                do{
                    top += El.offsetTop;
                }while((El = El.offsetParent).nodeName != 'BODY');
                return top;
            };
            //是否为ie，并读出ie版本
            var isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);
            isIE && (isIE = RegExp.$1);
            //是否为chrome
            var isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);
            //获得可以触发scroll事件的对象
            var box = isIE ? document.documentElement : document;
            //body元素的scroll事件
            var onscroll = box.onscroll = function(){
                //读取滚动条的位置和浏览器窗口的显示大小
                var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
                    left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
                    width = document.documentElement.clientWidth,
                    height = document.documentElement.clientHeight;
                //对所有图片进行批量判断是否在浏览器显示区域内
                for(var i=0 ; i < imgs.length; i++){
                    var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
                    //判断图片是否在显示区域内
                    if( _top >= top &&
                        _left >= left &&
                        _top <= top+height &&
                        _left <= left+width){
                        var _src = imgs[i].getAttribute('_src');
                        //如果图片已经显示，则取消赋值
                        if(imgs[i].src !== _src){
                            imgs[i].src = _src;
                        }
                    }
                }
            };
            var load = new Image();
            load.src = src;
            load.onload = function(){
                onscroll();
            };
        }
        delayload({id:['out1','out2'],src:'//img.jbzj.com/file_images/article/201307/2013072210300234.jpg'});
      </script>

js图片延迟加载的实现方法及思路

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
文字幻灯片
Jun 26 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
JS实现简易日历效果
Jan 25 Javascript
js添加table的行和列 具体实现方法
Jul 22 #Javascript
JS中eval函数的使用示例
Jul 21 #Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 #Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 #Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 #Javascript
jquery封装的对话框简单实现
Jul 21 #Javascript
jquery触发a标签跳转事件示例代码
Jul 21 #Javascript
线程(1) 弱口令(1) 访问日志(2) ipv6(1) 逆序(1) PV(1) UV(1) 连接数(1) jenkins(1) 进程假死(1)
You might like
用PHP书写安全的脚本代码
2012/02/05 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
学习教师法的心得体会
2014/09/03 职场文书
英语课前三分钟演讲稿（6篇）
2014/09/13 职场文书
2014年党总支工作总结
2014/12/18 职场文书
参观邀请函范文
2015/02/02 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书