Slow loading images, best way to display temporary image? JQuery perhaps?

Question

I am using Google Charts to display charting data in my application. Sometimes Google is slow and the charts will take a while to load. This scenario seems to be a common en

Answer 1

Intuitive solution load (very)big image. For example:

1. thumbnails are 100 x 75, big images to load size 960x720,
2. onClick thumbnail - we start load('/images/audi_big.jpg') big image,
3. after that replace oryginal image $("#big_image img").attr({src: '/images/audi_120px.jpg'}); and we have thumbnail width="960".
4. On that add optional layer with information LOADING {CSS}z-index: 1,
5. if big image loaded do it: $("#big_image img").attr({src: '/images/audi_big.jpg'});