How to preload resources with JavaScript Back

1. A image resource loader class

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        /** AMD style */
        define(factory);
    } else if (typeof exports === 'object') {
        /** Node, CommonJS style */
        module.exports = factory();
    } else {
        /** 浏览器全局变量(root 即 window) */
        root.resLoader = factory(root);
    }
}(this, function () {
    var isFunc = function (f) {
        return typeof f === 'function';
    }

    /** 构造器函数 */
    function resLoader(config) {
        this.option = {
            resourceType : 'image',     /** 资源类型，默认为图片 */
            baseUrl : './',             /** 基准url */
            resources : [],             /** 资源路径数组 */
            onStart : null,             /** 加载开始回调函数，传入参数total */
            onProgress : null,          /** 正在加载回调函数，传入参数currentIndex, total */
            onComplete : null           /** 加载完毕回调函数，传入参数total */
        }

        if (config) {
            for (i in config) {
                this.option[i] = config[i];
            }
        } else {
            alert('error parameters');
            return;
        }

        /** 加载器的状态，0：未启动   1：正在加载   2：加载完毕 */
        this.status = 0;

        /** 资源总数 */
        this.total = this.option.resources.length || 0;

        /** 当前正在加载的资源索引 */
        this.currentIndex = 0;
    };

    resLoader.prototype.start = function () {
        this.status = 1;
        var _this = this;
        var baseUrl = this.option.baseUrl;
        for (var i = 0, l = this.option.resources.length; i < l; i++) {
            var r = this.option.resources[i];
            var url = '';

            if (r.indexOf('http://') ===0 || r.indexOf('https://')===0) {
                url = r;
            } else {
                url = baseUrl + r;
            }

            var image = new Image();
            image.onload = function () {
                _this.loaded();
            };

            image.onerror = function () {
                _this.loaded();
            };

            image.src = url;
        }

        if (isFunc(this.option.onStart)) {
            this.option.onStart(this.total);
        }
    }

    resLoader.prototype.loaded = function () {
        if (isFunc(this.option.onProgress)) {
            this.option.onProgress(++this.currentIndex, this.total);
        }

        /** 加载完毕 */
        if (this.currentIndex===this.total) {
            if (isFunc(this.option.onComplete)) {
                this.option.onComplete(this.total);
            }
        }
    }

    /** 暴露公共方法 */
    return resLoader;
}));

2. Usage

var loader = new resLoader({
    resources : [
       'images/bg2.jpg'
    ],
    onStart : function (total) {
    },
    onProgress : function (current, total) {
    },
    onComplete : function (total) {
    }
});

3. Prefetching

Firefox

As per MDN, you can use the <link> tags in head of the document,

<link rel="prefetch" href="/assets/my-preloaded-image.png">

Also can be set into a request header:

Link: </assets/my-preloaded-image.png>; rel=prefetch

Or within a html meta tag:

<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">

Of course you can prefetch the next page you know:

<link rel="next" href="2.html">

IE 11

<link rel="prefetch" href="http://example.com/style.css" />
<link rel="dns-prefetch" href="http://example.com/"/>
<link rel="prerender" href="http://example.com/nextpage.html" />

Chrome

Chrome also does the same things as both Firefox and IE.

Comments Copyright © aleen42 all right reserved, powered by aleen42

Empty Comments

Sign in GitHub

As the plugin is integrated with a code management system like GitLab or GitHub, you may have to auth with your account before leaving comments around this article.

Notice: This plugin has used Cookie to store your token with an expiration.

authorize