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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
百度地图api如何使用
Aug 03 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
thinkphp5 路由分发原理
2021/03/18 PHP
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
机关门卫岗位职责
2013/12/30 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
毕业实习计划书
2015/01/16 职场文书
世界环境日活动总结
2015/02/11 职场文书
500字作文之周记
2019/12/13 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
MySQL里面的子查询的基本使用
2021/08/02 MySQL
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
vue实现登陆页面开发实践
2022/05/30 Vue.js