原理和过程
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. .NetCore WebApi结构及前端访问方式

    .NetCore WebApi结构及前端访问方式(Ajax方式,fetch方式,axios方式) //访问的地址api/控制器名称/方法名称;action一般会省略 [Route("api/ ...

  2. 010——MATLAB运行错误跳到下一个循环

    (一)MATLAB运行错误跳到下一个循环 :%文件的个数 try %运行的程序放到这里 catch continue%假如上面的没法执行则执行continue,到下个循环 end

  3. 洛谷 P2827 蚯蚓 题解

    每日一题 day32 打卡 Analysis 我们可以想一下,对于每一秒除了被切的哪一个所有的蚯蚓都增长Q米,我们来维护3个队列,队列1表示最开始的蚯蚓,队列2表示每一次被切的蚯蚓被分开的较长的那一部 ...

  4. mongodb 副本集的主的选举

    primary的选举依赖于各个实例的优先权重,默认权重都是1 复本集的主挑选权重最高的,权重一样的无法控制谁为主 设置各个实例的优先权重,挑选自己想要的实例为主,只有primary可以更改权重配置 c ...

  5. bilibili 高并发实时弹幕系统的实现

    高并发实时弹幕是一种互动的体验.对于互动来说,考虑最多的地方就是:高稳定性.高可用性以及低延迟这三个方面. 高稳定性,为了保证互动的实时性,所以要求连接状态稳定: 高可用性,相当于提供一种备用方案,比 ...

  6. codevs1580单词游戏

    题目描述中说: 单词为at,k=8则新单词为ib 推移规则是:如果k为正数则下推,否则上推,当推移超越边界时回到另一端继续推移. 但在我做题时发现: 这个描述与数据所要求的是完全相反的!!!! 样例1 ...

  7. CF1163F Indecisive Taxi Fee(线段树+图论)

    做法 这里的修改是暂时的 找到一条最短路径\(E\),需要考虑的是将最短路径上的边增大 每个点考虑与\(1/n\)的最短路径在E上前缀/后缀的位置,设\(L_i,R_i\) 考虑每条边\((u,v)\ ...

  8. MYSQL安装报错需要.NET4.0

    MySQL安装,提示需要.NET4.0 解决:下载安装.NET4.0即可 链接:https://pan.baidu.com/s/1u0e0lafBbR0QYEcXFsv9sQ 提取码:q6rr 复制这 ...

  9. locust使用命令

    locust -f locust_demo.py --logfile=locusfile.log

  10. TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.org

    TreeFrog Framework : High-speed C++ MVC Framework for Web Application http://www.treefrogframework.o ...