js简单实现图片延迟加载的方法


Posted in Javascript onJuly 19, 2016

本文实例讲述了js简单实现图片延迟加载的方法。分享给大家供大家参考,具体如下:

window.onload=window.onresize=window.onscroll=function()
{
  showImg();
};
function getPos(obj)
{
  var l=0;
  var t=0;
  while(obj)
  {
    l+=obj.offsetLeft;
    t+=obj.offsetTop;
    obj=obj.offsetParent;
  }
  return {left: l, top: t};
}
function showImg()
{
  var aTmg=document.getElementsByTagName('img');
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  var scrollBottom=scrollTop+document.documentElement.clientHeight;
  for(var i=0;i<aTmg.length;i++)
  {
    var p=getPos(aTmg[i]);
    if(p.top<scrollBottom)
    {
      //alert(aTmg);
      aTmg[i].src=aTmg[i].getAttribute('_src');
    }
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js获取php变量的实现代码
Aug 10 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
JS实现输入框提示文字点击时消失效果
Jul 19 #Javascript
JavaScript新增样式规则(推荐)
Jul 19 #Javascript
JavaScript动态添加css样式和script标签
Jul 19 #Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 #Javascript
js基于cookie记录来宾姓名的方法
Jul 19 #Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 #Javascript
使用plupload自定义参数实现多文件上传
Jul 19 #Javascript
You might like
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery功能函数详解
2015/02/01 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
如何利用Fabric自动化你的任务
2016/10/20 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
如何将json数据转换为python数据
2020/09/04 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
2015年元旦主持词开场白
2014/12/14 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
2019个人工作总结
2019/06/21 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
一文搞懂Python Sklearn库使用
2021/08/23 Python
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers