Trying to find a jQuery image preloader

Question

I am trying to find a working jQuery image preloader that plays well with the Marcofolio slideshow (here http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html).

The same slideshow is being used on the Philadelphia website here: http://www.visitphilly.com/ - but when I use my web developer tools to view the javascript at work I'm having a hard time trying to figure out exactly where the preloader is being a called.

I also tried using the following preload code, but it doesn't seem to help the situation (seems to load most slowly in the Safari browser):

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
    });
  }

  preload([
   'images/image1.jpg',
   'images/image2.jpg',
   'images/image3.jpg',
   'images/image4.jpg',
  ]);

If someone smart could inspect the visitphilly site element they may be able to see what I'm so obviously missing here. Alternatively, a preloading plugin suggestion would be appreciated, as I've tried a few which don't seem to help this particular slideshow.

Thank you!

possible duplicate of http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 — Marvin Emil Brach, Jun 24 '13 at 08:32

score 4 · Accepted Answer · answered Sep 21 '10 at 16:40

4

You don't need jQuery for that:

var images = [
    'a.png',
    'b.png'//etc
];

var path = 'images/';
var i, image, img;
for(i = 0; image = images[i]; i++) {
    img = new Image();
    img.src = path + image;
}

answered Sep 21 '10 at 16:40

I.devries

8,747
1
27
29

1

@l.devries, But if the OP is *already using `jQuery`*, then he might as well do it the cleaner way with `each`. – Jacob Relkin Sep 21 '10 at 16:47
1

@Jacob Relkin How is each cleaner ? It's not more readable and much slower due to the function creation – I.devries Sep 21 '10 at 17:41
l.devries - I am using your javascript and it seems to be doing the trick. And I think I even understand what you're doing there... Cool! Thank you so much for your assistance. – heathwaller Sep 21 '10 at 20:53

score 0 · Answer 2 · answered Sep 21 '10 at 17:25

0

Try to preload images in right order.

function preload(arrayOfImages) {
    var i = 0;

    function preloadnext() {
        if (i < arrayOfImages.length) {
            var img = new Image();
            img.onload = preloadnext;
            img.src = arrayOfImages[++i];
        }
    }

    preloadnext();
}

You can also specify image size ('new Image(width, height)') but I'm not sure if it can help.

answered Sep 21 '10 at 17:25

hluk

5,848
2
21
19

thank you hluk. I am fairly green at this and seeing the variety of ways in which people solve the same problems is very helpful for me. – heathwaller Sep 21 '10 at 20:55

score 0 · Answer 3 · answered Aug 04 '11 at 09:21

I've always used this fantastic plugin : http://flesler.blogspot.com/2008/01/jquerypreload.html

$.preload([ 'red', 'blue', 'yellow' ], {
    base:'images/colors/',
    ext:'.jpg'
});

Besides the fact that it is well coded - there are issues with preloading images in ie that this plugin deals with.

Trying to find a jQuery image preloader

3 Answers3