2

I was wondering what the best way to have a large HD image load on my website.

When simply using it as a background image, there is a delay and there is nothing on the screen for a about 5 seconds before it slowly slides down the screen.

I had an idea that maybe stacking multiple images on top of each other with increasing quality, so that at first you get bad quality, then when the HD is available and loaded, it is made visible on top of the bad quality image.

I guess really my question is, is this my only solution? Are there any better ways to do this?

Thanks.

Nathan Wall
  • 10,530
  • 4
  • 24
  • 47
Olokoo
  • 1,114
  • 3
  • 19
  • 34
  • That is what I would do in your situation, yes. I don't think there are any other efficient ways of doing what you describe, but I could be wrong. – Ben Schwabe Dec 04 '12 at 03:36
  • (Retagging to point to image related tags -- I think interlacing your image may be able to do what you want with just 1 image, but I don't know enough about it. You may find assistance from an expert on images. You will not, however, benefit from an expert in JavaScript or jQuery.) – Nathan Wall Dec 04 '12 at 03:38

1 Answers1

1

Look into image interlacing.

It can supposedly do what you want, though I don't have experience with it myself.

It does seem to be the way Facebook works to me.

Also see this question on SO, as provided by janith in the comments below: Load an image via Interlacing - From low to full resolution - HTML

Community
  • 1
  • 1
Nathan Wall
  • 10,530
  • 4
  • 24
  • 47
  • This could probably help: http://stackoverflow.com/questions/10771920/load-an-image-via-interlacing-from-low-to-full-resolution-html – janith Dec 04 '12 at 03:41
  • Thanks, janith. I added that link to my answer – Nathan Wall Dec 04 '12 at 03:43
  • This is great, so much better than my way. Just used photoshop to create an interlaced png, results can be seen here: [http://vsave.org](http://vsave.org) – Olokoo Dec 04 '12 at 03:51