原生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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
动态加载js、css的实例代码
May 26 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
微信小程序-详解数据缓存
Nov 24 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
Javascript实现单选框效果
Dec 09 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 不同编码下的字符串长度区分
2009/09/26 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Python获取远程文件大小的函数代码分享
2014/05/13 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python多线程原理与用法详解
2018/08/20 Python
python常用数据重复项处理方法
2019/11/22 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
酒店营销策划方案
2014/02/07 职场文书
贷款委托书
2014/08/01 职场文书
苏州园林导游词
2015/02/03 职场文书
导游词格式
2015/02/13 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android