原生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 相关文章推荐
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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分页的功能模块
2015/06/16 PHP
php判断linux下程序问题实例
2015/07/09 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
javascript判断office版本示例
2014/04/11 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
方正Java笔试题
2014/07/03 面试题
工程部经理岗位职责
2013/12/08 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
绿色城市实施方案
2014/03/19 职场文书
大班上学期个人总结
2015/02/13 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers