0

I'm working on this page for a photographer. I wrote a jQuery script that flips through the images. I was originally replacing the src attribute but found that some browsers don't update the image until the new src is fully loaded, so I ended up replacing the whole tag. However this still left the problem that images would reload if revisited, so I also append each image to a hidden div so they pop right back up.

After browsing a hundred images, this div is about 10 mB in size. Works fine on my own machine, but is there a point at which it's prudent to empty this div? How much data should I be expecting a browser to store comfortably?

Isaac Lubow
  • 3,557
  • 5
  • 37
  • 53

2 Answers2

1

Loading all the images into the document at the same time is way too much, and unnecessary.

As @Guffa points out, if you're looking to display images that were already loaded, just show them. The browser's caching will show the image almost instanly. (Only exception is if the server sends funny (non-standard) cache-control headers along with the resource, but that is extremely unlikely.)

If you want to speed up the displaying of images that haven't been loaded yet, the technique for that is called preloading. It will load images into the browser's cache, so they appear instantly when specified. See e.g. this SO question for some good solutions. There are more related questions.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • @Guffa on reading the question a second time, I think you are correct. I edited my answer. – Pekka Aug 29 '10 at 15:52
1

Don't keep the image tags, instead just let the images stay in the browser cache as long as the browser things there is room for them. They will load from the cache instead of from the server when they are revisited.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005