javascript - 如何对基于预加载图像进行排队以便浏览器缓存并在其他页面中使用

Question

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

这是迄今为止我能找到的最好的，但它没有达到应有的效果

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

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

因此浏览器会缓存这些图像，并且这些图像不会下载到其他页面上并立即显示

我希望这些图像也能缓存在移动设备上

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

我接受 jquery 和原始 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>