More efficient way to pre-load images

Question

What is a better way to pre-load images:

$.each(['{{ MEDIA_URL }}jwplayer/jwplayer.js',
        '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz',
        '{{ MEDIA_URL }}jwplayer/player.swf'], function() {
   $('<img/>')[0].src = this;

or:

var preloadImages = ['{{ MEDIA_URL }}jwplayer/jwplayer.js',
                     '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz',
                     '{{ MEDIA_URL }}jwplayer/player.swf'];
var imgs = [];
for (var i=0; i<preloadImages.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = preloadImages[i];
}

What makes one better than the other?

Answer 1

The second is better than the first, because it's plain JavaScript versus the excessive bloatware of jQuery.

You can improve the second one a little, by setting l=preloadImages.length up front and using that in the loop.

Answer 2

Both do the same thing. The first snippet is using jQuery, and the second does not. There's no reason to use jQuery exclusively for this purpose, so if you're not using the library elsewhere, go with the second version. If you're using jQuery throughout your site, then the first is ok too.