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 相关文章推荐
图片完美缩放
Sep 07 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
TypeScript中的方法重载详解
Apr 12 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
如何用JavaScipt测网速
May 09 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
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Django 多环境配置详解
2019/05/14 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
新锐科技Java程序员面试题
2016/07/25 面试题
大学军训感言200字
2014/02/26 职场文书
难忘的一课教学反思
2014/04/30 职场文书
新闻报道策划方案
2014/06/11 职场文书
岗位职责说明书模板
2014/07/30 职场文书
四风自我剖析材料
2014/09/30 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
刑事和解协议书范本
2014/11/19 职场文书
茶花女读书笔记
2015/06/29 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python实现自定义日志的具体方法
2021/05/28 Python