原理和过程
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. OSS使用

    https://www.cnblogs.com/wumian1360/p/8486726.html https://help.aliyun.com/document_detail/52204.html ...

  2. b/s实现大文件上传分片上传断点续传

    关键部分 前端用file.slice()分块 前端用FileReader获取每一分块的md5值 后端用MultipartFile接受分块文件 后端用FileOutputStream拼装分块文件 话不多 ...

  3. C# Ninject使用

    Ninject是一个IOC容器,用来解决程序中组件的耦合问题,它的目的在于做到最少配置.简单来讲就是 为我们选择一个想要的类来处理事务. 百度百科的解释:一个快如闪电.超轻量级的基于.Net平台的依赖 ...

  4. RookeyFrame 删除 线下添加的model

    环境:在model层已经添加了Crm_Cm_ContactInfo2 这个类,这个类现在已经添加到了数据库的,使用之前的方法(在前面的文章有提到该类) 删除步骤: 1.Sys_Module表 的字段 ...

  5. C#实现上传/下载Excel文档

    要求 环境信息:WIN2008SERVER  开发工具:VS2015 开发语言:C# 要求: 1.点击同步数据后接口获取数据展示页面同时过滤无效数据并写入数据库,数据可导出Excel并支持分类导出 2 ...

  6. shell编程题（三）

    将一目录下所有的文件的扩展名改为bak #! /bin/bash for i in `ls` do mv $i ${i%%.*}.bak done ${i%%.*} 截掉一个变量字符串第一个" ...

  7. jmeter非GUI界面常用参数详解

    压力测试或者接口自动化测试常常用到的jmeter非GUI参数,以下记录作为以后的参考 讲解:非GUI界面,压测参数讲解(欢迎加入QQ群一起讨论性能测试:537188253) -h 帮助 -n 非GUI ...

  8. HDU 6208 The Dominator of Strings ——（青岛网络赛，AC自动机）

    最长的才可能成为答案,那么除了最长的以外全部insert到自动机里,再拿最长的去match,如果match完以后cnt全被清空了,那么这个最长串就是答案.事实上方便起见这个最长串一起丢进去也无妨,而且 ...

  9. 批量更新表注释 mysql

    -- 生成更新语句 SELECT CONCAT( 'ALTER TABLE ', T2.table_name, ' COMMENT ''', T1.TABLE_COMMENT, ''';' ) sql ...

  10. 大数据技术之kettle（1）——安装

    一. kettle概述 1.kettle是一款开源的ETL工具,纯java编写,可以在Windows.Linux.Unix上运行,绿色无需安装,数据抽取高效稳定. 2.kettle的两种设计 简述: ...