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活用事件触发对象动作
Aug 10 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
vue穿梭框实现上下移动
Jan 29 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
第三章 php操作符与控制结构代码
2011/12/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
翻译专业应届生求职信
2013/11/23 职场文书
二年级小学生评语
2014/04/21 职场文书
报到证办理个人委托书
2014/10/06 职场文书
写给女朋友的保证书
2015/05/09 职场文书
js之ajax文件上传
2021/05/13 Javascript
Mysql基础知识点汇总
2021/05/26 MySQL
Mysql忘记密码解决方法
2022/02/12 MySQL
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android