基于原生js的图片延迟加载

最新推荐文章于 2024-06-02 21:27:33 发布

dayanwu2842

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量67

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/stephenykk/p/3767790.html

版权

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

如果项目用了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="images/grey.gif" alt="p1"></p>
    <p><img data-url="images/p2.jpg" src="images/grey.gif" alt="p2"></p>
    <p><img data-url="images/p3.jpg" src="images/grey.gif" alt="p3"></p>
    <p><img data-url="images/p4.jpg" src="images/grey.gif" alt="p4"></p>
    <p><img data-url="images/p5.jpg" src="images/grey.gif" alt="p5"></p>
    <p><img data-url="images/p6.jpg" src="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>

转载于:https://www.cnblogs.com/stephenykk/p/3767790.html

dayanwu2842

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于原生js的图片延迟加载

当页面图片比较多的时候，我们通常会做一个延迟加载，避免页面打开时一下子的请求数太多，加载过慢影响用户体验。如果项目用了jquery框架，则可以直接用 jquery.lazyload.可在jquery官网下载到。如果项目是基于原生js的，可以参考以下：<!doctype html><html lang="en"><head> ...
复制链接

扫一扫