4

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

我的下划线模板中有很多图片（很多.png），append() || 有点长 在我当前的视图中 prepend() 这些模板。

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

4

2 回答 2

8

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

$("<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 最简单的方法，尽管它可能需要您修改图像的目录结构。

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

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

于 2012-01-20T23:08:47.223 回答
1

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

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;
}
于 2012-01-21T16:09:00.453 回答