/    Sign up×
Community /Pin to ProfileBookmark

preloading images not working

Copy linkTweet thisAlerts:
Feb 17.2010

I am trying to preload over 300 small images. I am using a local developement server at this point and testing in IE.

As the user interacts with the page many different images will be appear and dissapper for them. It needs to be smooth. I was noticing that the status bar at the bottom of IE keeps saying the images are being loaded. So I thought I would try preloading the images. After implementing the following code, the IE status bar seems to still show that the images are loading each time and I havent noticed any improvement in load times. Could it be that the images are not really being preloaded? Here is the code I am using to preload (it is triggered by onload in the body tag:

imageObj = new Image(width, height);
imageObj.src = “images/pp1234.png”

my actual code repeats the second line many times in a loop with different image names, but this is the most basic for of my code and it results in the same problem.

Are there known issues with IE and preloading? am I doing it wrong? Any thoughts?

Thanks,
Sam

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@justinbarneskinFeb 17.2010 — IE isn't caching them.

You can run a loop to see what you status bar says

var imgs=[] // paths to all your images

for(i=0;i<imgs.length;i++){document.write('<img src="'+imgs[i]+'" style="display:none">')}



With this method, you can be sure all your images are there. Load your src by their index in document.images[]



Please try that and tell me how it goes?
Copy linkTweet thisAlerts:
@Sterling_IsfineFeb 17.2010 — 
my actual code repeats the second line many times in a loop with different image names[/QUOTE]That's the problem - you're re-using the same object.

Your loop should do this:
[CODE](new Image(width, height)).src = myPresumedArrayOfImageNames[ loopIndex ];[/CODE]
Copy linkTweet thisAlerts:
@samlochnerauthorFeb 17.2010 — I tried that, and it seems to get stuck when downloading the first image. In the status bar at the bottom, it says its downloading the first image. And the screen is blank white.

Oddly enough, an alert I have setup to run right after the code seems to get triggered, does the code perhaps execute nonlinearly? my code is below

Thanks,

Sam

//preload images

var a, b, r

var count = 0

var imgs = Array(36 * cols * rows - 1)

for (a = 1; a <= rows; a++) {


for (b = 1; b <= cols; b++) {

for (r = 5; r<= 355; r = r + 10){

imgs[count] = "images/pp" + String(a) + String(b) + String(r) + ".png"

count = count + 1

}


}

}

for(i=0;i<imgs.length;i++){
document.write('<img src="'+imgs[i]+'" style="display:none">')
}
alert("loaded")
Copy linkTweet thisAlerts:
@samlochnerauthorFeb 17.2010 — Hi Stirling isfine, I just tried your suggestion:

new Image(width, height).src = "images/pp" + String(a) + String(b) + String(r) + ".png"

but seems to be the same problem were in the bottom left corner of IE the status bar is still saying downloading image. Could it be it says this even if the image is already preloaded?

Thanks,

Sam
Copy linkTweet thisAlerts:
@justinbarneskinFeb 17.2010 — It'll do that every time you visit the page.

But now lets say you have all your images ready as document.images[0] through document.images[299]

In your script, you call the image to load like-

document.getElementById('myImage').src=document.images[23].src

I don't think you'll see your status going to the server again?

Also, if all those images are the same height and width, you might consider assembling them into a table, take a screen capture.

You'll only have three or four images to preload and instead of using image tags, set a div with the appropriate height & width and

change their background-image:position
Copy linkTweet thisAlerts:
@samlochnerauthorFeb 17.2010 — I have tried all of the suggestions. I even tried making a button that executed the preloaded and it, one by one, loaded each of the pictures into image objects so I could see them being loaded. But then when switching between images later I could still see the dowloading statement in the status bar.

Could it be the interent explorer will only hold a certain amount in memory? (my images take a up a total space of 2mb all combined).

Could it be that you see the downloading statement in the status bar even if the images are preloaded?

Funny how all over the web everyone seems to have slightly different ideas about how images need to be preloaded, and many are in disagreement. I had no idea this was such a controversial problem...

Any more thoughts?

Thanks,

Sam
×

Success!

Help @samlochner spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...