kk-lazy-load v1.0.0

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') });

### 浏览器
```html
  <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