Javascript 图像预加载器内存泄漏

Question

我有一个 JS 函数来预加载一组图像，然后将这些图像存储在一个数组中，并在触发时最终绘制到画布上。我在 iPad 和旧 iPhone 上的内存大小方面遇到了一些问题。因此，一旦加载了一定数量的图像，该应用程序就会变得一团糟。从而让我认为问题出在预加载器上。

如果有人能够对此有所了解或指出我的任何方向，我将不胜感激。

canvas.preload = function(images){

  var
  d = $.Deferred(),
  // Empty Array
  a = [];

  // For each image in batch
  _.each(images, function( val, i) {

    var img = new Image();

    img.onload = function(){

      // Push Image and index into array
      a.push({image:this, index:i});

      // Sort this array by the index
      var sortedArray = _.sortBy(a, 'index');

      // When total batch is loaded return it
      if (a.length === images.length) {
        // Pluck just image from array
        d.resolve(_.pluck(sortedArray, 'image'));
      }

    }

    img.src = images[i];

  });

  return d;

} // preload();

Answer 1

这里的问题是由于移动设备设置的内存限制。

您的图片可能对他们来说太大。对于大的，它可能是尺寸明智或咬合方式。问题是它们不会以任何方式提醒您：它们根本不会下载它们。

在这些情况下，最好的方法始终是根据设备提供不同的资产。 因此，例如，如果客户端使用移动设备，请尝试下载较小版本的图像。