jQuery preload images from list

Question

I want to preload rollover images in jQuery but the list of images is inside list of like this:

<li><a href="/images/1.jpg"></a></li>
<li><a href="/images/2.jpg"></a></li>
<li><a href="/images/3.jpg"></a></li>

==========

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

var imagelist = $('li a').attr("href");
preload(imagelist);

I changed the last line so it just grab the href from my list. Original script was from: Preloading images with jQuery

Is this correct?

Your var imagelist is only going to contain the href of the first 'li a' it finds. — Greg Pettit, Oct 04 '11 at 20:51
Can someone suggest a way to test preloading images (especially on local server since images load so fast anyway)? Something in firebug I can use? — David, Oct 04 '11 at 21:11
@David in Firebug, click the "net" tab and then "images" and watch the requests. — David Hellsing, Oct 04 '11 at 21:20
NP, please accept an answer below that you think answered your question. — David Hellsing, Oct 04 '11 at 22:23

Benjamin Crouzier · Answer 1 · 2011-10-04T21:00:35.503

3

You can do this:

var imagelist = $('li a').each(function() {
    preload($(this).attr("href"));
});

Or you can do this:

$.fn.preload = function() {
    this.each(function(){
        //alert("preloading " + $(this).attr("href"));
        $('<img/>')[0].src = $(this).attr("href");
    });
}
$('li a').preload();

jsFiddle

edited Oct 04 '11 at 21:00

answered Oct 04 '11 at 20:54

Benjamin Crouzier

40,265
44
171
236

But make sure you change preload so it accepts only a single href, not an array. (`function preload(input){$('')[0].src = input;}`) – someone Oct 04 '11 at 20:58
@pinouchon. Thanks. Can I just do this? $(li a).each(function(){ $('')[0].src = $this.attr("href"); }); – David Oct 04 '11 at 21:00
@David Yes you can. Just fix some syntax errors. [Fiddle here](http://jsfiddle.net/d8cLZ/) – Benjamin Crouzier Oct 04 '11 at 21:04
@pinouchon: Maybe you don't have to, but it seems a lot clearer and probably a little more efficient to me. – someone Oct 04 '11 at 21:12
@someone it depends... If you already use the preload function elsewhere, it's better not to change it. – Benjamin Crouzier Oct 04 '11 at 21:29
``$('')[0].src = $(this).attr("href");`` can be rewritten to ``(new Image).src = this.href`` – David Hellsing Oct 04 '11 at 21:58

score 0 · Answer 2 · answered Oct 04 '11 at 20:59

0

You can populate your imagelist like this to make it an array:

var imagelist = [];
$('li a').each(function(){
  imagelist.push($(this).attr('href'));
})

answered Oct 04 '11 at 20:59

Greg Pettit

10,749
5
53
72

David Hellsing · Accepted Answer · 2011-10-04T21:15:01.953

0

You can use $.map to convert the nodeList into an array of hrefs:

var imageList = $('li a').map(function() {
    return this.href;
});

preload(imageList);

Or skip the preload function and do a simple loop instead:

$('li a').each(function() {
    (new Image).src = this.href;
});

If you want to use it as a plugin try:

$.fn.preload = function() {
    return this.each(function() {
        (new Image).src = this.href;
    });
};

$('li a').preload();

edited Oct 04 '11 at 21:15

answered Oct 04 '11 at 21:01

David Hellsing

106,495
44
176
212

The resulting imageList is an object; does that matter to the preload function, or does JS's loose typing just handle it? – Greg Pettit Oct 04 '11 at 21:09
Arrays are objects in Javascript. And the $.each method in jQuery handles both. – David Hellsing Oct 04 '11 at 21:14

jQuery preload images from list

3 Answers3