javascript - 加载图像有时会导致图像被加载两次

Question

我正在开发一个图像预加载工具，但我遇到了一个奇怪的问题，每当我提供多个要加载的图像时，有时第一个图像会被处理两次。

我知道它会被处理两次，因为最后，当加载应该完成时，我将数组记录到控制台，有时还会记录到它:

(2) [img] [img]

(就像它应该的那样)如果我不断刷新，我有时会遇到:

(2) [img] [img]
(3) [img] [img]

这是产生该结果的下面的代码。我不明白为什么有时它返回正确的值，有时则不返回。如果您多次运行下面的代码片段，其中一次您将得到错误的结果。

看起来 loadComplete() 被击中了两次，这很令人困惑，因为它后面有一个 return 所以我不知道如何多次调用它。

class Load {

  constructor() {
    this.queue = [];
    this.completed = [];
    this.totalItems = 0;
    this.itemsCompleted = 0;
  }

  image(src) {
    return this.addToQueue(src);
  }

  addToQueue(src) {
    let item = {
      src: src,
      loaded: false
    };

    this.queue.push(item);
    this.totalItems++;

    return this;
  }

  addToCache() {
    for (let i = 0; i < this.queue.length; i++) {

      let item = this.queue[i];

      if (item.loaded) {
        this.queue.splice(i, 1);
        i--;

        this.itemsCompleted++;

        break;

      }

      this.loadImage(item);

    }

    if (this.itemsCompleted == this.totalItems) {

      this.loadComplete();

      return;

    }
  }

  start() {
    this.addToCache();
  }

  loadImage(item) {
    item.data = new Image();

    item.data.addEventListener('load', () => {
      this.completed.push(item.data);

      item.loaded = true;

      this.addToCache();
    });

    item.data.addEventListener('error', (err) => {
      console.log(err);
    });

    item.data.src = item.src;
    item.data.crossOrigin = 'anonymous';
  }

  loadComplete() {
    console.log(this.completed);
  }

}


let load = new Load();

load.image('https://i.imgur.com/fHyEMsl.jpg');

load.image('https://i.imgur.com/fHyEMsl.jpg');

load.start();

Answer 1

问题是您以异步方式更新完整内容，因此计数不正确，这是一个更正示例(很抱歉有点困惑，但您可以理解这个想法)。希望对您有帮助

class Load {

  constructor() {
    this.queue = [];
    this.completed = [];
    this.totalItems = 0;
    this.itemsCompleted = 0;
  }

  image(src) {
    return this.addToQueue(src);
  }

  addToQueue(src) {
    let item = {
      src: src,
      loaded: false
    };

    this.queue.push(item);
    this.totalItems++;

    return this;
  }

  addToCache() {
    for (let i = 0; i < this.queue.length; i++) {

      let item = this.queue[i];

      if (item.loaded) {
        this.queue.splice(i, 1);
        i--;

        this.itemsCompleted++;

        break;

      }

      this.loadImage(item);

    }
    
  }
  loadCompleted(){
  if (this.completed.length == this.totalItems) {

      this.loadComplete();

      return;

    }
  }

  start() {
    this.addToCache();
  }

  loadImage(item) {
    item.data = new Image();

    item.data.addEventListener('load', () => {
      this.completed.push(item.data);
      this.loadCompleted();
    });
          item.loaded = true;

    item.data.addEventListener('error', (err) => {
      console.log(err);
    });

    item.data.src = item.src;
    item.data.crossOrigin = 'anonymous';
  }

  loadComplete() {
    console.log(this.completed);
  }

}


let load = new Load();

load.image('https://i.imgur.com/fHyEMsl.jpg');

load.image('https://i.imgur.com/fHyEMsl.jpg');

load.start();