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 相关文章推荐
js两行代码按指定格式输出日期时间
Oct 21 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
软件工程专业推荐信
2013/10/28 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
用python开发一款操作MySQL的小工具
2021/05/12 Python