Question

我目前正在使用JQuery，RequireJS和Underscore完成一个巨大的Backbone.js应用程序。

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

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

Answer 1

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

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

会在url预加载图片。很明显，您可以轻松地将其应用于数组（此处使用$.each以获得简洁的语法）：

function preload(urls) {
    $.each(urls, function(i, url) {
        $("<img />").attr("src", url);
    });
}
preload(['/images/1.png', '/images/2.png', ... ]);

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

如果您的模板在内存中作为DOM对象可用，那么您可以使用$('img').map(function() { return $(this).attr('href') })之类的东西来遍历它们以查找URL。但是如果你在<script>标签中使用Underscore模板，并且在渲染视图之前没有将它们变成DOM对象，那么这不太可能起作用 - 这将是一个痛苦的，并且在某种程度上是处理器密集型的。使用虚拟数据渲染它们只是为了提取URL。
如果您使用像Ant这样的构建系统，并且您的模板与其他代码完全分开（例如，单独文件中的每个模板），那么您可以考虑使用正则表达式来解析URL的模板，然后将它们粘贴到Javascript文件中的数组中，您可以将其用于预加载器的输入。这是一个非常复杂的构建任务，但从性能角度来看，它可能是最佳选择，因为所有模板解析都是在构建时进行的，而不是在运行时进行的。
另一种构建系统方法，可能更简单，就是将您想要预加载的所有图像放入给定目录，然后将该目录下的每个文件放入Javascript数组中。这可能是Ant最简单的方法，但可能需要您修改图像的目录结构。
您可以随时手动制作网址数组，但要使用一组复杂的模板保持最新状态将会非常困难。
如果你有一个复杂的应用程序并且你想在任何给定的时间只预加载某些图像，你可能需要手动识别这些图像，然后在适当的时候调用preload(upcomingImages)适当的图像集。

Answer 2

如果您需要更精细的控件，可以使用DOM的Image对象。像：

var img = new Image();

img.src = 'image.png';

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

您需要对图片网址进行排队，并至少进行一次回调。

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

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

Backbone.js，Underscore.js：模板图像预加载

2 个答案: