当页面图片比较多的时候，我们通常会做一个延迟加载，避免页面打开时一下子的请求数太多，加载过慢影响用户体验。

如果项目用了jquery框架，则可以直接用 jquery.lazyload.可在jquery官网下载到。

如果项目是基于原生js的，可以参考以下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>lazyload class</title>

    <style>

    img{width:auto; height:300px;}

    </style>

</head>

<body>

    <h1>测试图片延迟加载效果</h1>

    <p><img data-url="images/p1.jpg" src="data:images/grey.gif" alt="p1"></p>

    <p><img data-url="images/p2.jpg" src="data:images/grey.gif" alt="p2"></p>

    <p><img data-url="images/p3.jpg" src="data:images/grey.gif" alt="p3"></p>

    <p><img data-url="images/p4.jpg" src="data:images/grey.gif" alt="p4"></p>

    <p><img data-url="images/p5.jpg" src="data:images/grey.gif" alt="p5"></p>

    <p><img data-url="images/p6.jpg" src="data:images/grey.gif" alt="p6"></p>

    <script>

        var API = {

            on : function(ele, ev, handler){

                ele.addEventListener ? ele.addEventListener(ev, handler) : ele.attachEvent('on' + ev, handler);

                return ele;

            },

            bind: function(obj, handler){

                return function(){ handler.apply(obj,arguments); }

            },

            pageX: function(ele){

                var left = 0;

                do{

                    left += ele.offsetLeft;

                }while(ele.offsetParent && (ele = ele.offsetParent).className.toLowerCase() !=='body');

                return left;

            },

            pageY: function(ele){

                var top = 0;

                do{

                    top += ele.offsetTop;

                }while(ele.offsetParent && (ele = ele.offsetParent).className.toLowerCase() !=='body');

                return top;

            },

            hasClass: function(ele,cls){

                return new RegExp('^|\\s' + cls + '\\s|$').test(ele.className);

            },

            attr: function(ele,attr,val){

                if(val===undefined){

                    return ele.getAttribute(attr);

                }else{

                    return ele.setAttribute(attr, val);

                }

            }

        };

    function Lazyload(id, diff, attr){

      this.container = typeof id === 'string' ? document.getElementById(id) : document.body;

      this.imgs = [].slice.call(this.container.getElementsByTagName('img'));

      this.diff = diff || 0;

      this.attr = attr || "data-url";

      this.load();//尝试加载正处在视窗中的图片

      this.spyScroll();

    }

    Lazyload.prototype = {

      constructor: Lazyload,

      spyScroll: function(){

          API.on(window, 'scroll', API.bind(this, this.load) );

      },

      load: function(){

          if(!this.imgs.length) return; //all image loaded

          var pos,url,imgs = this.imgs.slice();//copy the array

          var c=0;

          for(var i = 0, len = imgs.length; i < len; i++){

              pos = this.pos2viewport(imgs[i]);

              if(pos === 'above' || pos === 'in'){ //console.log(imgs[i],pos,i,'      imgs.length=',len);

                  url = API.attr(imgs[i], this.attr);

                  API.attr(imgs[i], 'src',url);

                  API.on(imgs[i], 'load', function(){

                      this.style.width='auto';//图片加载后 采用图片真实尺寸

                      this.style.height = 'auto';

                  });

                  this.imgs.splice(i-c,1); c++;//保持两数组元素的对应关系

              }

          }

        },

      pos2viewport:function(img){//img's position relative to viewport. above, in , below

        var imgScrollTop = API.pageY(img), diff = this.diff,

            rangeT = imgScrollTop - diff,

            rangeB = imgScrollTop + img.clientHeight + diff,

            viewportT = document.documentElement.scrollTop || document.body.scrollTop,

            viewportB = viewportT + document.documentElement.clientHeight;

        var pos = '';

        viewportT >= rangeB && (pos = 'above');

        viewportB <= rangeT && (pos = 'below');

        !pos && (pos = 'in');

        return pos;

      }

    };

    var lazy =  new Lazyload(document.body, 50);

    </script>

</body>

</html>

基于原生js的图片延迟加载的更多相关文章

  1. 原生Js页面滚动延迟加载图片

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

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  4. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  5. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  6. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  7. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  8. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  9. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

随机推荐

  1. zzbank oneOpencloud Env linuxaix6.1 interactiveMaintain(nfs,aix genintall基于系统iso光盘,aix6.1 puppet-Agent,Cent6.4 puppetServer,agent time no syn case Er)

    1,puppet--server,Client,Agent time no syn case eror puppet agent --server frontend -terr: Could not ...

  2. JAVA异常设计原则

    异常是面向对象语言非常重要的一个特性,良好的异常设计对程序的可扩展性.可维护性.健壮性都起到至关重要. JAVA根据用处的不同,定义了两类异常     * Checked Exception: Exc ...

  3. 封装的localstorge的插件，store.js

    封装的localstorge的插件,store.js https://github.com/marcuswestin/store.js/

  4. [置顶] js模板方法的思路及实现

    在js中如何实现设计模式中的模板方法? 思路的产生必然要求熟悉js,如何实现?就很简单了,都知道在js中如果定义两个相同名称的方法,前一个方法就会被后一个方法覆盖掉,使用此特点就可以实现模板方法. 例 ...

  5. shell编程之文本与日志过滤

    1:grep命令: grep -v  "char"  file_name 匹配不包括"char"的文本 grep -n -w "char" ...

  6. Primefaces 中e.offset(...)问题的处理

    问题 在使用Primefaces构建的页面中,原来好好的页面莫名奇异的出现下拉框不能显示数据且点击没有反应的情况.后来通过firefox发现其JS抛出了一个e.offset(...)错误 解决方法 经 ...

  7. Clementine 12.0 的使用安装（数据挖掘）

    1.下载[统计数据挖掘工具].TLF-SOFT-SPSS_Clementine_v12.0-CYGiSO.bin 2.下载虚拟光驱安装软件 本人使用的是DTLite4402-0131. 3.如果需要汉 ...

  8. 编写一个程序， 将 a.txt 文件中的单词与 b.txt 文件中的 单词交替合并到 c.txt 文件中， a.txt 文件中的单词用回车符 分隔， b.txt 文件中用回车或空格进行分隔。

    package cn.itcast; import java.io.File; import java.io.FileReader; import java.io.FileWriter; public ...

  9. shopnc b2b2c如何开启伪静态？？

    shopnc b2b2c开启伪静态的方法 一. windows环境下 1.先下载isapi rewrite插件,安装,然后我们把根目录下面的htaccess.txt那么修改成.htaccess即可. ...

  10. Eclipse+ADT的环境搭建

    Index: . Java环境变量的设置 . Android环境变量的设置 1.Java环境变量的设置 A.属性名称:JAVA_HOME 属性值:C:\Program Files\Java\jdk1. ...