原生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 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
vue-cli设置css不生效的解决方法
Feb 07 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
2016/07/18 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python单元测试unittest实例详解
2015/05/11 Python
详解Django中的过滤器
2015/07/16 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python如何从文件读取数据及解析
2019/09/19 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
小学教师的自我评价范例
2013/10/31 职场文书
保险专业求职信
2014/07/07 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
Ruby处理CSV数据方法详解
2022/04/18 Ruby
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python