JSPM – test-image-lazy@1.0.2

Package Exports

test-image-lazy
test-image-lazy/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (test-image-lazy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

说明

根据IntersectionObserver实现图片懒加载的封装

提示

主要针对长列表形式的图片懒加载，img元素需用数组传递；
img原图片地址取自dom上data-src属性；
支持选择是否启用懒加载

使用

1、视口+不懒加载

const imgs = document.getElementsByTagName("img");
let options = {};
let newImage = new ImgLoad([...imgs], options, (flag) => {
    console.log("成功了", flag);
});
newImage.lazyLoad();

2、视口+懒加载

const imgs = document.getElementsByTagName("img");
let options = { lazy: true };
let newImage = new ImgLoad([...imgs], options, (flag) => {
    console.log("成功了", flag);
});
newImage.lazyLoad();

3、指定祖先元素+懒加载

const imgs = document.getElementsByTagName("img");
let options = { root: document.querySelector(".box"), lazy: true };
let newImage = new ImgLoad([...imgs], options, (flag) => {
    console.log("成功了", flag);
});
newImage.lazyLoad();

4、视口+懒加载+距离视口100px

const imgs = document.getElementsByTagName("img");
let options = { lazy: true, rootMargin: "100px" };
let newImage = new ImgLoad([...imgs], options, (flag) => {
    console.log("成功了", flag);
});
newImage.lazyLoad();

5、Vue组件中使用

# template：部分代码省略
<img :data-src="require('@/assets/1.jpg')" alt="" />
<img :data-src="require('@/assets/2.jpg')" alt="" />
<img :data-src="require('@/assets/3.jpg')" alt="" />
<img :data-src="require('@/assets/4.jpg')" alt="" />

# js：部分代码省略
this.$nextTick(() => {
        const imgs = document.getElementsByTagName("img");
        let options = { lazy: true, rootMargin: "100px" };
        let newImage = new ImgLoad([...imgs], options, (flag) => {
            console.log("成功了", flag);
        });
        newImage.lazyLoad();
});