page-is-loading v1.1.2

pageIsLoading

监听网页图片资源加载进度，可实现网页加载进度条，不需要依赖其他库。

目前主要实现了对图片资源加载的监听（包括css中引入的图片）

安装

配合打包工具使用

npm i page-is-loading

import pageIsLoading from 'page-is-loading'

或者使用<script>标签导入可直接将dist目录下的page-is-loading.min.js文件拷贝到你的项目中，page-is-loading.min.js向外抛出一个pageIsLoading函数

<script src="./path/page-is-loading.min.js"></script>
// pageIsLoading(..)

用法

基础用法

pageIsLoading({
    // 检索图片的范围，不传时默认为body
    el: '#app',
    // 进度更新触发
    each: function(loaded, total, progress){
        /**
         * loaded: 已加载的资源数量
         * total: 总共要加载的资源数量
         * progress: 当次的进度百分比数，number类型并保留小数
         */
    },
    // 全部加载完毕触发
    load: function(){
        // ...
    }
})

排除掉部分图片资源

最简单的方式就是给要排除掉的图片元素加上data-page-is-loading-ignore属性

<img data-page-is-loading-ignore src="http://demo.com/a.jpeg">

或者传入一个正则表达式给配置项ignoreImg

pageIsLoading({
    // 传入一个正则表达式，排除掉被命中的图片名资源（针对图片的文件名）
    ignoreImg: /^ignore/,
    each: (loaded, total, progress, element) => {
        // ...
    },
    load: () => {
        // ...
    }
});

ignoreImg也支持传入一个函数，自行控制判断逻辑，并返回一个布尔值，返回true时则代表排除该图片

pageIsLoading({
    // 传入一个函数，该函数接受两个参数，filename图片名，url图片的地址
    // 函数返回 true 时，代表不检测该资源，反之则加入检测队列
    ignoreImg: (filename, url) => {
        return filename.startsWith('ignore')
    },
    each: (loaded, total, progress, element) => {
        // ...
    },
    load: () => {
        // ...
    }
});

额外检测一些图片

某些情况下，可能需要检测一些暂不存在DOM树中的图片，可以自行配置extraImg字段，插件内部会尝试去加载该图片资源，默认情况下该资源就会被浏览器缓存下来

pageIsLoading({
    // 额外监听这两张图片资源
    extraImg: [
        'http://demo.com/a.jpg',
        'http://demo.com/b.jpg',
    ],
    each: (loaded, total, progress, element) => {
        // ...
    },
    load: () => {
        // ...
    }
});

options

DOM attribute

data-page-is-loading-ignore: 标记要排除检测的元素

注意

由于是检测页面图片资源的加载进度，所以确保pageIsLoading执行时，页面的DOM已经存在