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

本文实例为大家讲解了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程序设计有所帮助。

(0)

相关推荐

  • js简单实现图片延迟加载的方法

    本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top:

  • js实现多张图片延迟加载效果

    本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--做移动端响应式必须加的样式--> <meta content="width=device-width, initial-scale=1.0, maximum-

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • JS实现图片延迟加载并淡入淡出效果的简单方法

    话不多说,直接看示例 首先是图片标记的写法 <img data-src="/images/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值不需要,直接将src属性去掉. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity:

  • javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的.原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载.这样做的好处在哪里?--当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家

  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • javascript图片延迟加载实现方法及思路

    本文实例为大家介绍了如何通过javascript来延迟加载图片,分享给大家供大家参考,具体内容如下 当一个网页中含有大量图片时,如果一开始就将图片全部加载完毕,势必会引起性能和效率上的问题,用户可能会由于等待时间过久而离开. 这个时候,我们需要利用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力. 一.延迟加载图片 基本思路如下: 给需要延迟加载的图片设置自定义属性比如lazy-src,存在图片源所在路径.然后将所有需要懒加载的图片放入一个数组,在window.onscroll的时候判断该数

  • 原生Js页面滚动延迟加载图片实现原理及过程

    原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html

随机推荐