Backbone.js,Underscore.js:模板图像预加载

Question

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

我的下划线模板中有很多图像(很多.png),并且附加()||有点长 在我当前视图中prepend()这些模板.

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

Answer 1

我认为你不一定需要一个库,除非有专门用于模板的库.正如这些相关问题中所详述的那样,预加载图像相对简单:

$("<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)在适当的时间调用适当的图像集.