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 StringBuilder类实现
Dec 22 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
利用 JavaScript 实现并发控制的示例代码
Dec 31 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中的CMS的涵义
2007/03/11 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP的几个常用加密函数
2016/02/03 PHP
Javascript typeof 用法
2008/12/28 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
python实现合并两个数组的方法
2015/05/16 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python常用数据重复项处理方法
2019/11/22 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
EJB timer的种类
2014/10/28 面试题
工程质量月活动方案
2014/02/19 职场文书
售后服务承诺书范文
2014/03/26 职场文书
新文化运动的基本口号
2014/06/21 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
六年级作文之关于梦
2019/10/22 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
小程序实现筛子抽奖
2021/05/26 Javascript