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初学困境—js初学
Dec 29 Javascript
input 高级限制级用法
Mar 26 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
微信小程序 bindtap 传参的实例代码
Feb 21 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 图像函数大举例(非原创)
2009/06/20 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
JavaScript 事件系统
2010/07/22 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
日化店促销方案
2014/03/26 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
低碳环保标语
2014/06/12 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
董事长致辞
2015/07/29 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
教你用python控制安卓手机
2021/05/13 Python