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 相关文章推荐
javascript的创建多行字符串的7种方法
Apr 29 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
js实现左右轮播图
Jan 09 Javascript
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
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python比较两个图片相似度的方法
2015/03/13 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python处理中文标点符号大集合
2018/05/14 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python实现电子词典
2020/03/03 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
用Python 执行cmd命令
2020/12/18 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
党员思想汇报范文
2013/12/30 职场文书
通用自荐信范文
2014/03/14 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
老师对学生的评语
2014/04/18 职场文书
小学班主任评语大全
2014/04/23 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
《搭石》教学反思
2016/02/18 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js