原生js页面滚动延迟加载图片


Posted in Javascript onDecember 20, 2015

本文实例为大家讲解了javascript瀑布流代码,即js页面滚动延迟加载图片,分享给大家供大家参考,具体代码如下

<!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 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
如何用JS实现简单的数据监听
May 06 Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
图解js图片轮播效果
Dec 20 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 #Javascript
js获取本机操作系统类型的两种方法
Dec 19 #Javascript
You might like
PHP中设置时区方法小结
2012/06/03 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python单链表实现代码实例
2013/11/21 Python
浅谈Python处理PDF的方法
2017/11/10 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
mac使用python识别图形验证码功能
2020/01/10 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python如何求圆的面积
2020/07/01 Python
通过实例解析python and和or使用方法
2020/11/14 Python
什么是接口(Interface)?
2013/02/01 面试题
网络方面基础面试题
2012/11/16 面试题
总经理的岗位职责
2014/02/23 职场文书
房屋租赁意向书
2014/04/01 职场文书
毕业生工作求职信
2014/06/30 职场文书
办公室岗位职责范本
2015/04/11 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书