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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
easyui form validate总是返回false的原因及解决方法
下面小编就为大家带来一篇easyui form validate总是返回false的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
这篇文章主要为大家详细介绍了bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs等相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
这篇文章主要介绍了利用JavaScript缓存远程窃取Wi-Fi密码的方法，本文通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了JavaScript实现判断图片是否加载完成的3种方法整理,本文讲解了onload方法、javascipt原生方法、jquery方法三种方法,需要的朋友可以参考下2015-03-03
本文是写在2011年，主要介绍 “Firefox” 浏览器插件 “Firebug” 的操作，如今主流浏览器对控制台都已经提供了很好的支持。我自己用的最多是谷歌的 “chrome” 浏览器，下面也用 “chrome” 浏览器来调试。2015-06-06
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
这篇文章主要介绍了JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求 的相关资料,需要的朋友可以参考下2017-10-10
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行，本文给大家2015-12-12
JavaScript 获取任一float型小数点后两位的小数
这篇文章主要介绍了JavaScript如何获取小数任一小数点后的位数的小数,需要的朋友可以参考下2014-06-06
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
下面小编就为大家带来一篇基于bootstrap-datetimepicker.js不支持IE8的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。这篇文章主要介绍了Webpack框架核心概念(知识点整理),需要的朋友可以参考下2017-12-12
苏公网安备 32031102000137号
最新评论