Backbone.js, Underscore.js: preloading template images

Question

I am currently finishing a huge Backbone.js application using jQuery, RequireJS and Underscore.

My underline template (a lot of .png) has a lot of images and it is a bit longer to add () || prepend () these patterns in my current view.

So, is there a good way to do what I do? I am looking for a library or example to preload on my templates.

Answer 1

I do not think that for this you definitely need a library, unless it is specifically used with templates. As indicated in these related questions , preloading images is relatively simple:

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

preload the image in url . It's pretty obvious that you can easily apply this to an array ( $.each is used here for a brief syntax):

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

You do not need a library for this. The hard part, in your case, generates a list of URLs for preloading. It’s not possible to find out the best approach here without understanding your template system better, but here are a few approaches:

• If you have your templates available as DOM objects in memory, you can skip them using something like $('img').map(function() { return $(this).attr('href') }) to find the urls. But if you use Underscore templates in <script> tags and you don’t insert them into DOM objects until you render the view, then this is unlikely to work - it will be painful and somewhat processor intensive to make them fictitious data only for the purpose of retrieving URLs.

• If you use a build system such as Ant, and if your templates are pretty separate from your other code (for example, each template in a separate file), you might think about how to use the regular expression to parse the patterns for URLs and then embed them in an array in a Javascript file that you can use to enter into your preloader. This is a fairly complex build task, but it is probably the best option in terms of performance, since all parsing of the templates occurs at build time and not at run time.

• Another systematic approach to assembly, perhaps simpler, is to place all the images you want to preload in a specific directory, and then put each file in that directory into a Javascript array. This is perhaps the easiest approach with Ant, although you may need to redefine the directory structure for images.

• You can always make your array of URLs manually, but it will be painful to update it with a complex set of patterns.

• If you have a complex application and you want to preload certain images at any given time, you probably need to identify these images manually, and then call preload(upcomingImages) at the appropriate time for the appropriate set of images.

Answer 2

If you need more granular control, you can use the DOM Image object. How:

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

You will need a queue of image URLs and at least one callback.

a simple worker would look like this:

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