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 20 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
独特的python循环语句
2016/11/20 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
八一演出活动方案
2014/02/03 职场文书
小学一年级学生评语
2014/04/22 职场文书
学生操行评语大全
2014/04/24 职场文书
教师师德演讲稿
2014/05/06 职场文书
公司合作协议范文
2014/10/01 职场文书
小学生暑假生活总结
2015/07/13 职场文书
中秋节主题班会
2015/08/14 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
nginx 配置指令之location使用详解
2022/05/25 Servers