原理和过程
1.页面滚动加载事件
2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片
3.获取元素集合 加载过的图片从集合里删除

效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/

 <!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="https://images0.cnblogs.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>

原生Js页面滚动延迟加载图片的更多相关文章

  1. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  2. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  3. vue使用原生js实现滚动页面跟踪导航高亮

    需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...

  4. 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  5. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  7. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  8. scrollReveal.js页面滚动动态效果

    scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScrip ...

  9. 原生js实现多组图片切换

    这几天一直在练习原生js写效果,需要理清自己的逻辑,做了一个切换多组图片的效果: css样式: * { margin: 0; padding: 0; } body { background: #303 ...

随机推荐

  1. Linux 下查看内存使用情况方法总结

    Linux查看CPU和内存使用情况:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在做Linux系统优化的时候,物理内 ...

  2. H3CNE学习6 静态路由

    一.相应命令 1.查看路由表 2.直连路由 3.静态路由配置 4.路由器转发数据包 二.静态路由2 1.路由优先级 管理距离即优先级,值越小就越优先 2.路由度量 如果上下都是使用的相同的路由协议那么 ...

  3. EL获取域中的数据

    EL(Expression Language)是表达式语言,EL的使用可以减少JAVA代码的书写. 1.EL表达式中的常量: <body bgcolor="#7fffd4"& ...

  4. 关于Keil4 转到 Keil5以后的一些错误解决

    一, 看自己选择CPU型号,根据型号再做配置 根据自己型号填写

  5. C结构体struct 和 共用体union的使用测试

    #include <stdio.h> struct { char name[10]; char sex; char job; int num; union{ //联合只能共用同一个内存 i ...

  6. SPOJ简介。

    今天一如既往地在luogu刷题,发现了一个新OJ,就去网上查资料.得到了下面这些. 以下转载自这里 SPOJ是波兰最为出色的Online Judge之一,界面和谐,题目类型也非常丰富,适合有一定基础的 ...

  7. 【CSP模拟赛】避难向导（倍增lca&树的直径）

    耐力OIer,一天7篇博客 题目描述 “特大新闻,特大新闻!全国爆发了一种极其可怕的病毒,已经开始在各个城市 中传播开来!全国陷入了巨大的危机!大量居民陷入恐慌,想要逃到其它城市以 避难!经调查显示, ...

  8. vue中全局filter和局部filter怎么用?

    需求: 将价值上加上元单位符号(全局filter) <template> <div> 衣服价格:{{productPrice|formatTime}} </div> ...

  9. 深度学习面试题17：VGGNet(1000类图像分类)

    目录 VGGNet网络结构 论文中还讨论了其他结构 参考资料 2014年,牛津大学计算机视觉组(Visual Geometry Group)和Google DeepMind公司的研究员一起研发出了新的 ...

  10. SC3聚类 | 拉普拉斯矩阵 | Laplacian matrix | 图论 | R代码

    Laplacian和PCA貌似是同一种性质的方法,坐标系变换.只是拉普拉斯属于图论的范畴,术语更加专业了. 要看就把一篇文章看完整,再看其中有什么值得借鉴的,总结归纳理解后的东西才是属于你的. 问题: ...