原生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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
详解Document.Cookie
Dec 25 Javascript
老生常谈js数据类型
Aug 03 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
vue实现循环切换动画
Oct 17 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
几个Shell Script面试题
2014/04/18 面试题
EJB的角色和三个对象
2015/12/31 面试题
怎么写好自荐信
2013/10/30 职场文书
妇科医生自荐信
2013/11/05 职场文书
大学毕业感言
2014/01/10 职场文书
团日活动总结书
2014/05/08 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Python pandas之求和运算和非空值个数统计
2021/08/07 Python