原生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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript中常用编程知识
Apr 08 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
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框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
canvas知识总结
2017/01/25 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python中方法链的使用方法
2016/02/23 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
资金主管岗位职责范本
2014/03/04 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
工作推荐信范文
2014/05/10 职场文书
初中教师业务学习材料
2014/05/12 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python