如何基于队列预加载图像以供浏览器缓存并在其他页面中使用

Question

我一直在寻找所有可用的解决方案

这是迄今为止我能找到的最好的，但它不能正常工作

它适用于前几张图像，然后停止。然后我刷新页面，处理更多图像，然后再次停止。

所以基本上我想要实现的是，给一个函数提供 100 张图像，它开始逐个下载它们

所以浏览器会缓存这些图片，这些图片不会下载到其他页面并立即显示

我希望这些图片也可以缓存在移动设备上

这是我调用的 javascript 代码。其实我有100多张图片，但没有全部放在这里

我接受 jquery 和 raw javascript 解决方案没关系

   (function() {
    'use strict';

    var preLoader = function(images, options) {
        this.options = {
            pipeline: true,
            auto: true,
            /* onProgress: function(){}, */
            /* onError: function(){}, */
            onComplete: function() {}
        };

        options && typeof options == 'object' && this.setOptions(options);

        this.addQueue(images);
        this.queue.length && this.options.auto && this.processQueue();
    };

    preLoader.prototype.setOptions = function(options) {
        // shallow copy
        var o = this.options,
            key;

        for (key in options) options.hasOwnProperty(key) && (o[key] = options[key]);

        return this;
    };

    preLoader.prototype.addQueue = function(images) {
        // stores a local array, dereferenced from original
        this.queue = images.slice();

        return this;
    };

    preLoader.prototype.reset = function() {
        // reset the arrays
        this.completed = [];
        this.errors = [];

        return this;
    };

    preLoader.prototype.load = function(src, index) {
        console.log("downloading image " + src);
        var image = new Image(),
            self = this,
            o = this.options;

        // set some event handlers
        image.onerror = image.onabort = function() {
            this.onerror = this.onabort = this.onload = null;

            self.errors.push(src);
            o.onError && o.onError.call(self, src);
            checkProgress.call(self, src);
            o.pipeline && self.loadNext(index);
        };

        image.onload = function() {
            this.onerror = this.onabort = this.onload = null;

            // store progress. this === image
            self.completed.push(src); // this.src may differ
            checkProgress.call(self, src, this);
            o.pipeline && self.loadNext(index);
        };

        // actually load
        image.src = src;

        return this;
    };

    preLoader.prototype.loadNext = function(index) {
        // when pipeline loading is enabled, calls next item
        index++;
        this.queue[index] && this.load(this.queue[index], index);

        return this;
    };

    preLoader.prototype.processQueue = function() {
        // runs through all queued items.
        var i = 0,
            queue = this.queue,
            len = queue.length;

        // process all queue items
        this.reset();

        if (!this.options.pipeline)
            for (; i < len; ++i) this.load(queue[i], i);
        else this.load(queue[0], 0);

        return this;
    };

    function checkProgress(src, image) {
        // intermediate checker for queue remaining. not exported.
        // called on preLoader instance as scope
        var args = [],
            o = this.options;

        // call onProgress
        o.onProgress && src && o.onProgress.call(this, src, image, this.completed.length);

        if (this.completed.length + this.errors.length === this.queue.length) {
            args.push(this.completed);
            this.errors.length && args.push(this.errors);
            o.onComplete.apply(this, args);
        }

        return this;
    }


    if (typeof define === 'function' && define.amd) {
        // we have an AMD loader.
        define(function() {
            return preLoader;
        });
    } else {
        this.preLoader = preLoader;
    }
}).call(this);



// Usage:
$(window).load(function() {

    new preLoader([
        '//static.pokemonpets.com/images/attack_animations/absorb1.png',
        '//static.pokemonpets.com/images/attack_animations/bleeding1.png',
        '//static.pokemonpets.com/images/attack_animations/bug_attack1.png',
        '//static.pokemonpets.com/images/attack_animations/bug_attack2.png',
        '//static.pokemonpets.com/images/attack_animations/bug_boost1.png',
        '//static.pokemonpets.com/images/attack_animations/burned1.png',
        '//static.pokemonpets.com/images/attack_animations/change_weather_cloud.png',
        '//static.pokemonpets.com/images/attack_animations/confused1.png',
        '//static.pokemonpets.com/images/attack_animations/copy_all_enemy_moves.png',
        '//static.pokemonpets.com/images/attack_animations/copy_last_move_enemy.png',
        '//static.pokemonpets.com/images/attack_animations/cringed1.png',
        '//static.pokemonpets.com/images/attack_animations/critical1.png',
        '//static.pokemonpets.com/images/attack_animations/cure_all_status_problems.png',
        '//static.pokemonpets.com/images/attack_animations/dark_attack1.png',
        '//static.pokemonpets.com/images/attack_animations/dark_attack2.png',
        '//static.pokemonpets.com/images/attack_animations/dark_attack3.png',
        '//static.pokemonpets.com/images/attack_animations/dark_boost1.png',
        '//static.pokemonpets.com/images/attack_animations/double_effect.png',
        '//static.pokemonpets.com/images/attack_animations/dragon_attack1.png',
        '//static.pokemonpets.com/images/attack_animations/dragon_attack2.png',
        '//static.pokemonpets.com/images/attack_animations/dragon_attack3.png',
        '//static.pokemonpets.com/images/attack_animations/dragon_attack4.png'
    ]);

});

Answer 1

这样的？

我没有时间让它漂亮。

const pref = "https://static.pokemonpets.com/images/attack_animations/";
const defa = "https://imgplaceholder.com/20x20/000/fff/fa-image";
const images=['absorb1','bleeding1','bug_attack1','bug_attack2','bug_boost1','burned1','change_weather_cloud','confused1','copy_all_enemy_moves','copy_last_move_enemy','cringed1','critical1','cure_all_status_problems','dark_attack1','dark_attack2','dark_attack3','dark_boost1','double_effect','dragon_attack1','dragon_attack2','dragon_attack3','dragon_attack4'];
let cnt = 0;
function loadIt() {
  if (cnt >= images.length) return;
  $("#imagecontainer > img").eq(cnt).attr("src",pref+images[cnt]+".png"); // preload next
  cnt++;
}
const $cont  = $("#container");
const $icont = $("#imagecontainer");

// setting up test images
$.each(images,function(_,im) {
  $cont.append('<img src="'+defa+'" id="'+im+'"/>'); // actual images
  $icont.append('<img src="'+defa+'" data-id="'+im+'"/>'); // preload images
});

$("#imagecontainer > img").on("load",function() {
  if (this.src.indexOf("imgplaceholder") ==-1)  { // not for the default image
    $("#"+$(this).attr("data-id")).attr("src",this.src); // copy preloaded
    loadIt(); // run for next entry
  }  
})

loadIt(); // run

#imagecontainer img { height:20px }
#container img { height:100px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<hr/>
<div id="imagecontainer"></div>