lazyload-io v0.0.2

Description（描述）

实现图片懒加载的组件，
手Q等浏览器使用老版本兼容，
其它平台使用新版本

Design（实现原理）

实现曝光逻辑

老版本

检测节点的getBoundingClientRect()返回值判断位置

新版本

使用IntersectionObserver
https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill 用来适配低版本浏览器

自动绑定load

使用MutationObserver，
对于不支持MutationObserver的浏览器采用DOMNodeInserted事件替代

Usage(用法)

    npm install lazyload-io

引入

    import lazyLoad from "lazyload-io";

图片src里的地址放到data-src里,如

    <img src="" data-src="https://www.flypie.cn/images/avatar.jpg" />

如果需要手动刷新lazy缓存，需要手动调用(仅限老版本,新版本无此问题)

    lazyLoad.refreshLazyload();

在某些情况下 如果lazyload没有初始化完成或者没有事件响应,重新渲染(仅限老版本,新版本无此问题)

    lazyLoad.currentLazy();

兼容性

PC:

IE8以上

Chrome 48+

Firefox 49+

Opera 42+

Opera Mini 不支持

mobile:

Android 4.3以上 , Safari 9以上

QQ,UC,微信 新版本均支持，老版本尚未测试

Demo(Path)

js

    import lazyLoad from "@mfelibs/base-tools-lazyload";

html

    <img src="" data-src="https://www.flypie.cn/images/avatar.jpg" />

Screenshots（快照）

Properties(对外属性)：

类型：（Array，Number，String，Boolean，（asc,desc））

Methods(对外方法)

Events(对外事件)