原生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 replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php查询ip所在地的方法
2014/12/05 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
javascript操作cookie
2017/01/17 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
JS回调函数深入理解
2019/10/16 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python 上下文管理器使用方法小结
2017/10/10 Python
详解django.contirb.auth-认证
2018/07/16 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
垃圾回收的优点和原理
2014/05/16 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
单位未婚证明范本
2014/01/18 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
中国梦口号
2014/06/13 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
公司出纳岗位职责
2015/03/31 职场文书
七一慰问简报
2015/07/20 职场文书
公共场所卫生管理制度
2015/08/05 职场文书