jquery - Backbone.js、下划线.js : template images preloading

Question

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

我的下划线模板中有很多图像(很多.png)，并且append() || 有点长在我当前的 View 中 prepend() 这些模板。

那么有什么好方法可以做我所做的事情吗？我正在寻找一个库或示例来在我的模板上进行预加载。

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> 中使用下划线模板标签，并且在渲染 View 之前不会将它们放入 DOM 对象，那么这不太可能起作用 - 只是为了提取 URL 的目的而使用虚拟数据渲染它们会很痛苦，而且会占用处理器资源。

• 如果您使用像 Ant 这样的构建系统，并且您的模板与其他代码相当独立(例如，每个模板位于单独的文件中)，那么您可以考虑使用正则表达式来解析 URL 模板，然后将它们粘贴到 Javascript 文件中的数组中，您可以将其用作预加载器的输入。这是一个相当复杂的构建任务，但从性能的角度来看，它可能是最好的选择，因为所有模板解析都发生在构建时，而不是运行时。

• 另一种构建系统方法(可能更简单)是将要预加载的所有图像放入给定目录中，然后将该目录下的每个文件放入 Javascript 数组中。这可能是使用 Ant 最简单的方法，尽管它可能需要您修改图像的目录结构。

• 您始终可以手动创建 URL 数组，但使用一组复杂的模板使其保持最新会很痛苦。

• 如果您有一个复杂的应用程序，并且您只想在任何给定时间预加载某些图像，您可能需要手动识别这些图像，然后调用 preload(upcomingImages)在适当的时间获取适当的图像集。