使用echo.js实现图片懒加载

最新推荐文章于 2024-05-10 09:49:09 发布

海是最蓝的天

最新推荐文章于 2024-05-10 09:49:09 发布

阅读量832

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/li1342392184/article/details/89000794

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <title>使用echo.js实现图片懒加载</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: "微软雅黑";
      list-style: none;
    }
    ul{
      width: 320px;
      margin: 20px auto;
    }
    ul li{
      width: 150px;
      float: left;
      margin-right: 20px;
    }
    ul li:nth-of-type(2n){
      margin-right: 0;
    }
    ul li img {
      display: block;
      width: 150px;
      height: 152px;
      background: url(img/loading.gif) 50% no-repeat;
    }
    ul li p{
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
  </style>
</head>
<body>
    <!-- 注意事项：最好给图片设置宽度和高度
      img中src是起到占位的作用,指向默认加载图片路径 真正加载的图片是data-echo里面定义的 -->
    <ul>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第1个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第2个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第3个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第4</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第5个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第6个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第7个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第8个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第9个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第10个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第11个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第12个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第13个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第14个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第15个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第16个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第17个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第18个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第19个</p>
      </li>
      <li>
        <img src="img/blank.gif" data-echo="img/ig.jpg" />
        <p>第20个</p>
      </li>
    </ul>
    <script type="text/javascript" src="js/echo.js"></script>
    <script>
      echo.init({
        offset: 0,//离可视区域多少像素的图片可以被加载
        throttle: 0,//图片延时多少毫秒加载
      });
    </script>
</body>
</html>

echo.js代码

/*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(function() {
      return factory(root);
    });
  } else if (typeof exports === 'object') {
    module.exports = factory;
  } else {
    root.echo = factory(root);
  }
})(this, function (root) {

  'use strict';

  var echo = {};

  var callback = function () {};

  var offset, poll, delay, useDebounce, unload;

  var isHidden = function (element) {
    return (element.offsetParent === null);
  };
  
  var inView = function (element, view) {
    if (isHidden(element)) {
      return false;
    }

    var box = element.getBoundingClientRect();
    return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
  };

  var debounceOrThrottle = function () {
    if(!useDebounce && !!poll) {
      return;
    }
    clearTimeout(poll);
    poll = setTimeout(function(){
      echo.render();
      poll = null;
    }, delay);
  };

  echo.init = function (opts) {
    opts = opts || {};
    var offsetAll = opts.offset || 0;
    var offsetVertical = opts.offsetVertical || offsetAll;
    var offsetHorizontal = opts.offsetHorizontal || offsetAll;
    var optionToInt = function (opt, fallback) {
      return parseInt(opt || fallback, 10);
    };
    offset = {
      t: optionToInt(opts.offsetTop, offsetVertical),
      b: optionToInt(opts.offsetBottom, offsetVertical),
      l: optionToInt(opts.offsetLeft, offsetHorizontal),
      r: optionToInt(opts.offsetRight, offsetHorizontal)
    };
    delay = optionToInt(opts.throttle, 250);
    useDebounce = opts.debounce !== false;
    unload = !!opts.unload;
    callback = opts.callback || callback;
    echo.render();
    if (document.addEventListener) {
      root.addEventListener('scroll', debounceOrThrottle, false);
      root.addEventListener('load', debounceOrThrottle, false);
    } else {
      root.attachEvent('onscroll', debounceOrThrottle);
      root.attachEvent('onload', debounceOrThrottle);
    }
  };

  echo.render = function (context) {
    var nodes = (context || document).querySelectorAll('[data-echo], [data-echo-background]');
    var length = nodes.length;
    var src, elem;
    var view = {
      l: 0 - offset.l,
      t: 0 - offset.t,
      b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
      r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
    };
    for (var i = 0; i < length; i++) {
      elem = nodes[i];
      if (inView(elem, view)) {

        if (unload) {
          elem.setAttribute('data-echo-placeholder', elem.src);
        }

        if (elem.getAttribute('data-echo-background') !== null) {
          elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')';
        }
        else if (elem.src !== (src = elem.getAttribute('data-echo'))) {
          elem.src = src;
        }

        if (!unload) {
          elem.removeAttribute('data-echo');
          elem.removeAttribute('data-echo-background');
        }

        callback(elem, 'load');
      }
      else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {

        if (elem.getAttribute('data-echo-background') !== null) {
          elem.style.backgroundImage = 'url(' + src + ')';
        }
        else {
          elem.src = src;
        }

        elem.removeAttribute('data-echo-placeholder');
        callback(elem, 'unload');
      }
    }
    if (!length) {
      echo.detach();
    }
  };

  echo.detach = function () {
    if (document.removeEventListener) {
      root.removeEventListener('scroll', debounceOrThrottle);
    } else {
      root.detachEvent('onscroll', debounceOrThrottle);
    }
    clearTimeout(poll);
  };

  return echo;

});

详情请戳链接: https://github.com/lijinbin/echo.js

海是最蓝的天

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用echo.js实现图片懒加载

页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewp...
复制链接

扫一扫

专栏目录