js简单实现图片延迟加载的方法

 更新时间:2016年07月19日 16:30:20   转载 作者:leejersey  
这篇文章主要介绍了js简单实现图片延迟加载的方法,涉及javascript针对页面元素的遍历与动态设置技巧,需要的朋友可以参考下

本文实例讲述了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查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • Bootstrap风格的zTree右键菜单

    Bootstrap风格的zTree右键菜单

    这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能,实现代码分为html,css和js三部分,代码简单易懂,非常不错,需要的朋友可以参考下
    2017-02-02
  • 原生JS实现的碰撞检测功能示例

    原生JS实现的碰撞检测功能示例

    这篇文章主要介绍了原生JS实现的碰撞检测功能,涉及javascript鼠标事件响应及页面图形坐标位置运算、检测相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • javascript温习的一些笔记 基础常用知识小结

    javascript温习的一些笔记 基础常用知识小结

    在电脑上找到多年前的javascript的一些小笔记,因为要将笔记本上面的文件整理一下, 不用的删除掉, 所以将此篇笔记再发布一下,存档到自己的博客吧, 电脑上的文件就删除了
    2011-06-06
  • JavaScript结合HTML DOM实现联动菜单

    JavaScript结合HTML DOM实现联动菜单

    这篇文章主要为大家详细介绍了JavaScript结合HTML DOM实现联动菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js根据日期判断星座的示例代码

    js根据日期判断星座的示例代码

    本篇文章主要是对js根据日期判断星座的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 黑帽seo劫持程序,js劫持搜索引擎代码

    黑帽seo劫持程序,js劫持搜索引擎代码

    今天在浏览网页时无意中发现了这段JS劫持搜索引擎代码。劫持搜索引擎正常搜索过来的流量,这是黑帽seo常用的劫持方法。特意解密出来供大家了解其劫持原理。感兴趣的朋友一起学习学习吧
    2015-09-09
  • 引用 js在IE与FF之间的区别详细解析

    引用 js在IE与FF之间的区别详细解析

    这篇文章主要介绍了js在IE与FF之间的区别。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • ES6中Symbol类型用法实例详解

    ES6中Symbol类型用法实例详解

    这篇文章主要介绍了ES6中Symbol类型用法,结合实例形式分析了Symbol类型的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • javascript 特性检测并非浏览器检测

    javascript 特性检测并非浏览器检测

    NCZ在他的同名博客《Feature detection is not browser detection》中,讲述了一直以来前端开发中的一个热门技术——检测用户的浏览器平台,并详细地叙说历史发展以及各种办法的优缺点。
    2010-01-01
  • return false,对阻止事件默认动作的一些测试代码

    return false,对阻止事件默认动作的一些测试代码

    很明显我们每个函数都返回false,如果返回值可以阻止事件默认动作,那么文本框将无法输入任何内容。 看下面我测试的结果,注意红的部分。
    2010-11-11

最新评论