一个实现图片预加载(preload)与懒加载(lazyloaad)的javascript库。

npm install ido-image-loader

1. 将图片src替换为data-src,src上放置placeholder占位图

    <img
    src="./img/loading.gif"
    data-src="./img/ml.png"
    alt=""
    />

2. 给图片添加lazyload-img的类名

    <img
    src="./img/loading.gif"
    data-src="./img/ml.png"
    	 class="lazyload-img"
    alt=""
    />

3. 调用js方法

   var IdoLoader = new IdoImageLoader();
   IdoLoader.lazyload()

   如果需要自定义class(lazyload-img)类名,或者懒加载时长

   var IdoLoader = new IdoImageLoader();
   IdoLoader.lazyload(500,'my-lazyimg-class')

1. 准备预加载图片的列表

   var imglist = ['a.png','b.png','c.png’]

2. 调用方法加载图片

   var IdoLoader = new IdoImageLoader();
   IdoLoader.preload(imglist);

另外所有图片加载完毕也可以设置回调方法, 和设置图片加载的超时时间。

var IdoLoader = new IdoImageLoader();
var callback = function(success){
 if(success) {
 console.log("全部图片加载完毕")
 } else {
 console.log("未加载完毕全部图片")
 }
}
/**
 * 预加载图片函数
 * @param images 加载的图片数组或对象
 * @param callback 全部图片加载完毕后调用的回调函数
 * @param timeout 加载超时的时长
 */
IdoLoader.preload(imglist, callbak, 1000);

1.0.0

• Initial】初始版本