原生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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jQuery 使用个人心得
Feb 26 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
微信小程序入门教程
Nov 18 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
javascript实现滚动条效果
Mar 24 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python实现机器人行走效果
2018/01/29 Python
详解django2中关于时间处理策略
2019/03/06 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
python实现PCA降维的示例详解
2020/02/24 Python
vscode调试django项目的方法
2020/08/06 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
介绍一下RMI的基本概念
2016/12/17 面试题
学雷锋演讲稿
2014/03/04 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
地方白酒代理协议书
2014/10/25 职场文书
追讨欠款律师函
2015/05/27 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
小学家庭教育心得体会
2016/01/14 职场文书