原生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 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
vue+element实现表单校验功能
May 20 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue使用echarts实现水平柱形图实例
Sep 09 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php中上传文件的的解决方案
2018/09/25 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
js局部刷新页面时间具体实现
2013/07/04 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
python实现外卖信息管理系统
2018/01/11 Python
深入浅析python 中的匿名函数
2018/05/21 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
农民工讨薪标语
2014/06/26 职场文书
停水通知
2015/04/16 职场文书
《叶问2》观后感
2015/06/15 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
食堂卫生管理制度
2015/08/04 职场文书