原生Js页面滚动延迟加载图片实现原理及过程


Posted in Javascript onJune 24, 2013

原理和过程
1.页面滚动加载事件
2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片
3.获取元素集合 加载过的图片从集合里删除
效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>原生Js页面滚动延迟加载图片</title> 
<style type="text/css"> 
*{margin: 0;padding: 0} 
img.scrollLoading{border: 1px solid #ccc;display: block;margin-top: 10px;} 
</style> 
</head> 
<body> 
<div id="content"></div> 
</body> 
</html> 
<script type="text/javascript"> 
var _CalF = { 
$ : function(object){//选择器 
if(object === undefined ) return; 
var getArr = function(name,tagName,attr){ 
var tagName = tagName || '*', 
eles = document.getElementsByTagName(tagName), 
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6 
attr = attr || clas, 
Arr = []; 
for(var i=0;i<eles.length;i++){ 
if(eles[i].getAttribute(attr)==name){ 
Arr.push(eles[i]); 
} 
} 
return Arr; 
}; 
if(object.indexOf('#') === 0){ //#id 
return document.getElementById(object.substring(1)); 
}else if(object.indexOf('.') === 0){ //.class 
return getArr(object.substring(1)); 
}else if(object.match(/=/g)){ //attr=name 
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g))); 
}else if(object.match(/./g)){ //tagName.className 
return getArr(object.split('.')[1],object.split('.')[0]); 
} 
}, 
getPosition : function(obj) { //获取元素在页面里的位置和宽高 
var top = 0, 
left = 0, 
width = obj.offsetWidth, 
height = obj.offsetHeight; 
while(obj.offsetParent){ 
top += obj.offsetTop; 
left += obj.offsetLeft; 
obj = obj.offsetParent; 
} 
return {"top":top,"left":left,"width":width,"height":height}; 
} 
}; //添加图片list 
var _temp = []; 
for (var i = 1; i < 21; i ++) { 
_temp.push('<img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="http://images.cnitblog.com/blog/150659/201306/23160223-c81dd9aa9a2a4071a47b0ced2c9118bc.gif" /><br />图片' + i); 
} 
_CalF.$("#content").innerHTML = _temp.join(""); 
function scrollLoad(){ 
this.init.apply(this, arguments); 
} 
scrollLoad.prototype ={ 
init : function(className){ 
var className = "img."+className, 
imgs = _CalF.$(className), 
that = this; 
this.imgs = imgs; 
that.loadImg(); 
window.onscroll = function(){ 
that.time = setTimeout(function(){ 
that.loadImg(); 
},400); 
} 
}, 
loadImg : function(){ 
var imgs = this.imgs.reverse(), //获取数组翻转 
len = imgs.length; 
if(imgs.length===0){ 
clearTimeout(this.time); 
return; 
} 
for(var j=len-1;j>=0;j--){ //递减 
var img = imgs[j], 
imgTop = _CalF.getPosition(img).top, 
imgSrc = img.getAttribute("data-src"), 
offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//滚动条的top值 
bodyHeight = document.documentElement.clientHeight; //body的高度 
if((offsetPage+bodyHeight/2) > (imgTop-bodyHeight/2)){ 
img.src = imgSrc; 
this.imgs.splice(j,1); 
} 
} 
} 
} 
var img1 = new scrollLoad("scrollLoading"); 
</script>
Javascript 相关文章推荐
JS定义回车事件(实现代码)
Jul 08 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
Angular.JS中的this指向详解
May 17 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
jquery可见性过滤选择器使用示例
Jun 24 #Javascript
jquery子元素过滤选择器使用示例
Jun 24 #Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 #Javascript
通过javascript获取iframe里的值示例代码
Jun 24 #Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 #Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 #Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 #Javascript
You might like
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php文件上传类的分享
2017/07/06 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python线程池threadpool实现篇
2018/04/27 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
百度吧主申请感言
2014/01/12 职场文书
歌唱比赛主持词
2014/03/18 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
社区植树节活动总结
2015/02/06 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书