原理和过程
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. spring-data-jpa一对多多对一多对多关联

    一对多.多对一 Country类 @Entity @Table(name = "Country") public class Country { @Id //sequence id ...

  2. CSS精灵图(王者荣耀案例)

    首先,我们应该知道引入精灵图的原因: 具体是因为,网页上面的每张图片都要经历一次请求才能展示给用户,小的图标频繁的请求服务器,降低页面的加载速度,为了有效地减少服务器接收和发送请求的次数,提高页面的加 ...

  3. Matlab与数学建模

    一.学习目标. (1)了解Matlab与数学建模竞赛的关系. (2)掌握Matlab数学建模的第一个小实例—评估股票价值与风险. (3)掌握Matlab数学建模的回归算法. 二.实例演练. 1.谈谈你 ...

  4. 像素迷踪，当Unity的Frame Debugger力不从心时

    http://www.manew.com/thread-92382-1-1.html 从版本5开始,Unity包含了一个全新的可视化帧调试工具,Frame Debugger.该工具能帮你解决很多图形方 ...

  5. Vic-软件测试-开始软件测试

    前言 大家好,我是 Vic,今天给大家带来开始软件测试的概述,希望你们喜欢 软件测试 软件测试的基本概念.方法.常用测试工具的使用 常用测试工具的使用性能自动化测试工具:jmeter.loadrunn ...

  6. 各种DTO类最好有 无参数的构造方法

    以一下这个类为例 @Getter @Setter @ToString class Person { private String s; public Person(String s) { this.s ...

  7. Linux压缩和解压类指令

    一.gzip / gunzip  指令 gzip 用于压缩文件,gunzip 用于解压文件. 基本语法gizp  文件 (功能描述:只能将文件压缩为*.gz文件)gunzip  文件.gz (功能描述 ...

  8. 容易被忽视的python装饰器的特性

    今天发现了装饰器的另一种用法,下面就先上代码: data_list = [] def data_item(func): data_list.append(func) return func @data ...

  9. Rancher2.3.2部署Kubenetes Dashboard

    首先进入到集群中的System命令空间,因为kubenetes dashboard是给整个集群使用的,并不是默认的Default命名空间使用的 Default命名空间,是默认的命名空间,也是在部署其他 ...

  10. 自定义Hooks函数获取窗口大小（十一）

    其实自定义Hooks函数和用Hooks创建组件很相似,跟我们平时用JavaScript写函数几乎一模一样,可能就是多了些React Hooks的特性,自定义Hooks函数偏向于功能,而组件偏向于界面和 ...