JavaScript: Preloading images function - Usage, DOM ready & SEO?

Question

With the help of Google I've written a small preloader script:

var i = 0;

function preloader() {

    imageObj = new Image();

    images = [
        'some/image1.jpg', 
        'some/image2.jpg',
        'some/image3.png',
        'and.png',
        'so.jpg',    
        'on.png'
    ];

    for (i = 0; i <= 20; i ++) {

      imageObj.src = images[i];

    }
}

This function must be called in the head of my HTML file for maximum effect, right? Do I really need to declare var i = 0;? How can I fire another function once the preloading is complete?

Also, I would like to ask how to implement this function in running websites. Let's say I have a page that has 100 img tags. I guess I have to copy and paste the source into the images array by hand, right? Because to do that with a loop, the DOM needs to be ready which again means that the images have already started loading?

Does preloading affect SEO?

If there is a better jQuery way of preloading I would be ok with that.

the way I understand it, preloading is only used for elements that are NOT in the DOM (yet). elements in the DOM get loaded anyway, and the event for when they have loaded is $(document).ready() (assuming jQuery). The actual effect towards anything depends on how (and why) you use it. — Nick Andriopoulos, Mar 12 '13 at 15:32

score 1 · Answer 1 · answered Mar 12 '13 at 15:36

1

Because you're assigning the image SRC to the same variable, the each new request will cancel the previous because it has not completed loading.

You can use an array for this as well:

imageObj = [];

...your code...

for (i = 0; i < images.length; i ++) {
      imageObj[i] = new Image()
      imageObj[i].src = images[i];
    }

No, this will not affect SEO because the scrapers are looking at the TEXT of your page, not the images. You can run this before the DOM is ready because you're not manipulating the DOM - all images are in memory.

jQuery is simply made of JavaScript and does not really have anything that would speed the efficiency of this simple block of code.

answered Mar 12 '13 at 15:36

Diodeus - James MacFarlane

112,730
33
157
176

There's no reason to store the image in an array (`imageObj`), unless it needs to be accessed later... – Ian Mar 12 '13 at 15:38
The reason for this is to ensure that it loads. Otherwise the request for the image will get cancelled the next iteration of the loop and no pre-loading will occur. – Diodeus - James MacFarlane Mar 12 '13 at 15:40
No it won't, because the fact that you use `new Image()` on every loop ensures a new image and new (not overwritten) request is started. Why wouldn't it load? I've used preloading like this without the array and it's worked fine – Ian Mar 12 '13 at 15:41
Yes, but the OP is using a new image OUTSIDE of the loop. – Diodeus - James MacFarlane Mar 12 '13 at 15:43
Right, so I agree that you need to use a `new Image()` inside of the loop, but I don't see a reason to put that image in a new array `imageObj`. You should be able to do `var newImage = new Image(); newImage.src = images[i];` – Ian Mar 12 '13 at 15:46

JavaScript: Preloading images function - Usage, DOM ready & SEO?

1 Answers1