Internet Explorer preloading (500+ Images)

Question

I'm working on a site similar to this one: http://www.nike.com/jumpman23/aj2012/ where I'm preloading a lot of images. The browser shouldn't be locked while preloading, so I'm using a setTimeout function to only load one image at a time. Everything works fine in FF/Chrome/Safari etc but IE got a problem with it.

Sometimes its loading about 400 images and then enters the error function, and sometimes it just preloads the first 6 images - it seems completely random. It's hard to explain the problem, so I took the important part of the code put it here: http://sidneywidmer.ch/preloader/ (make shure to open your console first)

You can ignore some of the stuff like the loadOrder variable:)

I also tried to set different interval times for IE, or pause the download on error for a second but nothing seems to work...

Has anybody an idea how I could solve this problem?

Update: After some investigation I can definitely say that there is somehow a memory leak or something. In IE ram usage goes up from 1.4 GB to over 3 GB and then it stops loading the images...

Answer 1

Try to use lazy images load. Have a look at this plugin to jQuery http://www.appelsiini.net/projects/lazyload

Answer 2

Ok, I could finally solve the problem on my own... The problem was that Inte.net Explorer (and maybe also other browsers) consume a lot of RAM while images get preloaded in the DOM. The actual size (eg 10kb) doesn't really matter. What matters the most is the resolution of the image. So while I can easily preload 1000 images with a resolution of 400 x 200 and a size of 20kb, it's not possible at all to preload 1000 images with a resolution of 1024 x 768 and a file size of 10kb.

I don't know exactly WHY this is the case, maybe someone can describe this behavior more in-depth.