原理和过程
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. boost.tribool

    tribool boost.tribool类似c++内建的bool类,但基于三态的布尔逻辑,在true和false之外还有一个indeterminate状态.一个例子场景是执行某项任务,在执行之前状态 ...

  2. SIGAI机器学习第二十二集 AdaBoost算法3

    讲授Boosting算法的原理,AdaBoost算法的基本概念,训练算法,与随机森林的比较,训练误差分析,广义加法模型,指数损失函数,训练算法的推导,弱分类器的选择,样本权重削减,实际应用. AdaB ...

  3. 012——matlab判断变量是否存在

    (一)参考文献:https://www.ilovematlab.cn/thread-48319-1-1.html (二) clc clear a = exist('a') ans =1 clc cle ...

  4. asp.net实现大文件上传分片上传断点续传

    HTML部分 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...

  5. 转载 | Python AI 教学│k-means聚类算法及应用

    关注我们的公众号哦!获取更多精彩哦! 1.问题导入 假如有这样一种情况,在一天你想去某个城市旅游,这个城市里你想去的有70个地方,现在你只有每一个地方的地址,这个地址列表很长,有70个位置.事先肯定要 ...

  6. UOJ188. 【UR #13】Sanrd [min_25筛]

    传送门 思路 也可以算是一个板题了吧qwq 考虑min_25筛最后递归(也就是DP)的过程,要枚举当前最小的质因子是多少. 那么可以分类讨论,考虑现在这个质因子是否就是次大质因子. 如果不是,那么就是 ...

  7. 2019暑期金华集训 Day7 分治

    自闭集训 Day7 分治 主定理 由于我沉迷调题,这个地方没听课. 某些不等式 咕了 nth_element 使用快速排序的思想,选一个中间点,看左右有多少个. 期望复杂度\(O(n)\). 首先把一 ...

  8. +和join的区别

    + 每次进行相加都会开辟新的空间,回收旧的空间join 一次性开辟好空间,一次性添加进去,一次性回收

  9. 【多线程与并发】Java中的12个原子操作类

    从JDK1.5开始,Java提供了java.util.concurrent.atomic包,该包中的原子操作类提供了一种使用简单.性能高效(使用CAS操作,无需加锁).线程安全地更新一个变量的方式. ...

  10. vue element-UI Form表单验证

    摘自官网 https://element.eleme.cn/#/zh-CN/component/form 保证prop的值等于v-model的值,并且初始化值,这样验证才好使. 可以自定义验证 < ...