Javascript preload images

JavaScript
1

I have tried many suggestions and read many articles on how to preload javascript images but nothing seems to be working for me. I constantly see that the status bar in the bottom left corner of IE say it is downloading images even after I have preloaded them.

I have around three hundred 4kb png images that will need to be preloaded such that there is no delay for a user to see one of the images when they interact with the page.

Can anyone please provide me with an image preloading solution that they have tested and know for sure actually does preload the image?

Thank you,
Sam

2

Preloading images still takes the time to load the images into cache. Your 300 by 4k images are still 1200k that has to be downloaded before all of your preloaded images will actually be preloaded. Any attempt to access any of those images prior to that specific image being preloaded will still mean that they will need to wait for the image to download.

It all depends on what you are doing with the images. If they are all in a slideshow where the images will be viewed one at a time then simply preloading one or two images ahead of the current image in the slideshow is probably the most effective way since that way the next image they are likely to want will be one that has been preloaded.

If the images can be accessed in any order then things are much more difficult because you have no way to predct which image will be wanted next and so in order for all the images to be available you’d have needed to start preloading them quite a few pages earlier for them to all be there when the first one is requested.

3

crmalibu kindly helped me out some time ago with a preloader. It includes a callback option so that you can call a function once complete.

function Preload(urls, onCompleteCallback) {
		var numLeft = this.numLeft = urls.length;
    
		function remove() {
			this.onload = this.onerror = this.onabort = null;
			numLeft--;
			if (numLeft === 0 && onCompleteCallback) {
				onCompleteCallback();
			}
		}
		for (var i=0, l=urls.length; i < l; i++) {
			var img = new Image;
			img.onload = img.onerror = img.onabort = remove;
			img.src = urls[i];
		}
}
4

felgall,
I need to have all of the images preloaded at all times. So I dont mind if there is a 1 minute delay before the user can interact with the page, the images must be preloaded.

RLM2008
I tried your code and preload all of the images and the user cant interact untill all images have been preloaded. Yet I still see in the bottom left corner of the page that the images still need to be downloaded on each use. Here is the code I use to call your preloader to load the images:

function preloadImages() {
var a, b, r
for (a = 1; a <= rows; a++) {
for (b = 1; b <= cols; b++) {
for (r = 5; r <= 355; r = r + 10) {
preload(“images/pp” + String(a) + String(b) + String(r) + “.png”,alert(loaded))

        }
      
    }
}

}

for the url path I have also tried using the full url:
“http://localhost:59995/website/images/pp” + String(a) + String(b) + String(r) + “.png”

still no luck. Always I see the downloading statement in the status bar. I tried running it live (rather than on my asp.net developement server) and it was very slow loading the images as I suspected.

What am I doing wrong? Please, if anyone has actually had success with preloading, please help me.

Thanks,
Sam

5

I’m not entirely convinced by that code, but it is expecting to be passed an array not a string, so I would call it like this:

 preload( [ "images/pp" + String(a) + String(b) + String(r) + ".png" ], function(){alert(loaded)} );
6

Yes it takes an array. Also try changing ‘alert(loaded)’ to function(){alert(“loaded”)}

Edit: Ahh logic Ali’s already picked up on that.

7

Sounds like you need to have an automated set of a few dozen pages for them to read through while you are pre-loading the images. That’s about the only way you’ll get them to wait for all the images to pre-load - especially those on slow connections where it might take 15 minutes or more for those images to load.

8

Thank you everyone for you responses.

Felgall: A good point about my user having to wait. But for now I just have to get it working.

RLM2008 and logic ali: I have made the changes you suggested. No I create an array of urls and that is passed to the preload function. As well, I have changed the oncompletecallback as you suggested.

Still no go. Logic Ali, you said you are not entirely convinced by this code. Do you have any suggetions?

Please someone try to make something work on your end. I am entirely stumped by this problem :frowning:

Here is the code I have so far that calls the preload function given earlier:

function preloadImages() {
var urls = new Array()
var aString, bString, a, b, r
var count = 0
for (a = 1; a <= rows; a++) {
for (b = 1; b <= cols; b++) {
for (r = 5; r <= 355; r = r + 10) {
urls[count] = “images/pp” + String(a) + String(b) + String(r) + “.png”
count = count + 1
}
}
}
preload(urls, function() { alert(“loaded”) });
}

thanks,
Sam

9

I used it here to preload images for a slideshow I created. Seems to work pretty well as far as I can tell.

http://www.pixel-shack.com/critter/index.php

You’re welcome to check the source.

RLM

10

RLM2008, I check out your site, if you look carefully at the status bar in internet explorer, you will see that the images are being downloaded each time there is a new image shown. Had you noticed that?

Does anyone else have any solutions they have tested and had work for them?

Thanks,
Sam

11

That doesn’t mean that the images being downloaded are the ones to be shown now. Most slideshows operate by pre-loading ahead one or two images so that the images are pre-loaded by the time you get to them but without having to wait for all the images to load before you start (which would defeat the purpose of pre-loading).

Ideally pre-loading of the next image to be viewed takes place while the visitor is still looking at the prior image. The whole point of pre-loading is to remove wait time by loading images while the visitor is studying the prior entry instead of making them wait for what they asked for. It doesn’t matter that images are being downloaded when a request to view the next image is made as long as that next image is already downloaded before you get to it.

The two things you are trying to avoid by using pre-loading are: 1- making your visitor wait for the image they asked for to load and 2- making your visitor wait an extra long time for the page to load before they can start interacting with it.

12

Ahah!! Seems to be working somewhat. I hadnt tried the latest changes live until now. As it turns out, the status bar will say downloading files even if the preloading has been done! Thus the only way to test if it is working is to test live where you can easily spot delays due to loading.

But there is still a bit of an issue. I am using a button to call the code I wrote a few posts back. The first time I press it, some of the images are preloaded and then it seems to give up. I press it again, more images are loaded. After a few times pressing it, I finally get the alert saying it is done.
Alternatively if I just press it once and wait, I never see the alert.
It is almost as if things are getting hung up because preloading is taking to long (its only 1.2 mb total so its a little suprising if this is the case).

If this is the case, does anyone have any suggestions on how to encourage the browser to keep preloading all the images? Or is there something else going on entirely?

On a side note, I understand that preloading is used to provide seamless interaction for the user. In this case however, I want to preload all of the images first even if it takes 5 minutes (I highly doubt this as I only have 1.2mb of images).

Thanks for all of the help and patience as I am very new to all this.
Sam

13

That’s more like seven or eight minutes for someone on dialup.

The whole point of pre-loading is to avoid delays along the way so that the page appears to load as quickly as possible and has minimal delays after that.

For people on dialup if the page doesn’t look like it has finished loading in 30 seconds then over half will give up and look for a faster loading page - the same applies to those on broadband with pages that take more than a few seconds to load.

If your visitors can access the images in any order then you are best off to not pre-load them at all since pre-loading means that they have to download all the images whether they actually intend viewing them all or not. If they are accessed in a specific order then download the first with the page and pre-load the second image. When they select the second image pre-load the third and so on so that each image downloads while they are looking at the prior one.

If you really want to download them all at the start just include them all in the HTML with width and height set to 1px so that they just show as a row of dots at the bottom of the page (and then use CSS to hide the dots). No JavaScript is required to just bulk download images when loading a web page.

The purpose of pre-loading with JavaScript is to dynamically select what to pre-load based on what your visitor is expected to look at next.

14

i just love the way you break everything down, you are so knowledgeable.

can one of you provide me with simple javascript funtion that would allow my script to prefetch just one or two images ahead?

so i could pass it an array of images that would sit in an images folder, and when they click the arrow on the slideshow it would update the image, and preload the next one or 2 in the background.

i sppose i could have it preload them using 1 pixel images in the html under the slideshow, an then just have javascript do a

document.images.slide.src = $next_image

or something like that since my slideshow won’t have a huge amount of images.

15

Can’t you just put the images at the top of HTML and say display none? That will preload them as well I believe.