Jquery Backbone.js、下划线.js：模板图像预加载

我目前正在使用JQuery、RequireJS和下划线完成一个巨大的Backbone.js应用程序

我的下划线模板（很多.png）中有很多图像，在当前视图中附加这些模板有点长

---

所以有一个很好的方法来做我所做的事情？我正在寻找一个库或一个示例来对我的模板进行预加载。

我认为你不一定需要一个库来实现这一点，除非有一个库专门用于模板。如中所述，预加载图像相对简单：

$("<img />").attr("src", url);

你不需要图书馆。在您的例子中，最困难的部分是生成要预加载的URL列表。如果不更好地理解模板系统，就不可能知道这里的最佳方法，但这里有一些方法：

• 如果内存中有可用的DOM对象模板，那么可以使用

  $（'img'）.map（function（）{return$（this.attr（'href'）}）

  之类的方法循环查找URL。但是，如果您在
  标记中使用下划线模板，并且在渲染视图之前不将其转换为DOM对象，那么这不太可能起作用-仅为了提取URL而使用虚拟数据渲染这些模板将是一件痛苦的事，并且会占用一定的处理器资源

>P>如果使用像Ant这样的构建系统，并且如果模板与其他代码（例如，在单独的文件中的每个模板）是完全分离的，那么您可以考虑使用ReGEX解析URL模板，然后将其粘贴到JavaScript文件中的数组中，这样就可以将其输入到预加载器中。这是一个相当复杂的构建任务，但从性能角度来看，这可能是最好的选择，因为所有模板解析都发生在构建时，而不是运行时
• 另一种构建系统的方法（可能更简单）是将所有要预加载的图像放入给定目录，然后将该目录下的每个文件放入Javascript数组。这可能是使用Ant最简单的方法，不过可能需要修改图像的目录结构

• 您可以随时手动创建URL数组，但使用一组复杂的模板使其保持最新是一件痛苦的事情

• 如果您有一个复杂的应用程序，并且希望在任何给定时间只预加载某些图像，那么您可能需要手动识别这些图像，然后在适当的时间调用

  preload（upcominginiges）

  ，以获取适当的图像集

---

如果需要更精细的控件，可以使用DOM的

图像

对象。比如：

var img = new Image();

img.src = 'image.png';

img.load = function () {
  console.log('image.png is fully loaded');
}

您需要对图像URL和至少一个回调进行排队

一个简单的工人看起来像：

function worker (url, callback) {
  var img = new Image();
  img.src = url;
  img.load = callback;
}

---

这与以前有很大不同吗？例如，你是否在寻找一种从模板代码中自动提取要预加载的图像列表的方法？是的，我在寻找你所说的，我找到了这个，但是如果我使用这样的方法，我如何使用backbone/requireJs/下划线？我需要调整这个库来使用require.js，对吗？谢谢你的回答，我宁愿不使用库（因为我需要让它与requireJS一起工作）。我想我将通过使用它们的数组在我的视图或类似的东西中附加它们来预加载img：）你知道，我发现同样的代码也可以预加载用于div的背景图像，这令人惊讶。尽管看起来我们正在将图像预加载到标记中。

function worker (url, callback) {
  var img = new Image();
  img.src = url;
  img.load = callback;
}