kk-lazy-load

kk-lazy-load可以实现图片的懒加载

基本用法

npm

  <div class="pic-box lazy" data-src="../../assets/img/p_04.jpg">
    <img alt="全职高手番外篇精彩来袭">
  </div>

  import lazyload from 'utils/kk-lazy-load';

  lazyload({
      selector: '.lazy',
      source: 'img',
      buff: 600,
      placeholder: require('../../assets/img/placeholder.png')
  });

浏览器

  <script src='utils/kk-lazy-load'></script>
  <div class="pic-box lazy" data-src="../../assets/img/p_04.jpg">
    <img alt="全职高手番外篇精彩来袭">
  </div>

  lazyload({
      selector: '.lazy',
      source: 'img',
      buff: 600,
      placeholder: '../../assets/img/placeholder.png'
  });

配置

| 配置项 | 默认值 | 是否必填 | 说明 | | :---: | :---: | :---: | :---: | | selector | '.lazy' | 否 | css选择器。使用该选择器获取的节点的范围用来判断是否进入可视区(以下简称范围元素) | | source | 'img' | 否 |css选择器。使用该选择器获取的范围元素的后代节点（以下简称目标元素）的src会替换为范围元素的data-src的值。目标元素必须为img元素 | | buff | 200 | 否 |默认200，即范围元素距离可视区还有200px距离的时候就开始加载图片 | | placeholder | 无 | 是 | 范围元素的背景图，图片没加载前，脚本会把目标元素隐藏，显示范围元素的背景图 | | wrapper | window | 否 | 表示绑定scroll事件的元素，浏览器不支持IntersectionObserver时有效，默认值window | | fade | 2 | 否 | 图片加载后淡入的渐变时长（秒）, 小于0则不开启 |

安装

  npm install kk-lazy-load