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 enough pattern -- so I'm wondering what's a good approach to show a temporary image, while the image is delivered from Google. I have access to jQuery -- and have seen a number of "preloading" plugins. Is this what I need?

Is the correct term for this scenario/pattern really called "image preloading"?

I'd love to hear what people use to solve this situation.

thanks

Answer 1

Image preloading is usually when you download images in anticipation of their being requested but before the user actually makes a request to see them. I believe the current thinking is this usually adds overhead unless a very large percentage of your users can be expected to view the image.

Answer 2

You can show one of those fancy loading gifs found at http://ajaxload.info/ while the image is loading. After the image is loaded you hide the loading gif and show the image itself.

check http://jqueryfordesigners.com/image-loading/ for a tutorial.

Answer 3

Images have an onload event which will fire once the image has finished loading.

You could listen for that event, and until it fires show another image.

<script>
function showImage() {
    $("#blah").show();
    $("#temp").hide();
}
</script>

<img id="temp" src="temp_image.png" />
<img id="blah" src="blah.png" onload="showImage();" style="display:none;"/>

Answer 4

No you dont want to preload (this assumes stalling the page load while the designated images load). you jsut need to display a loading graphic.

$(.loading).css({
  'background-image':'myLoading.gif', 
  'background-repeat: 'no-repeat', 
   height: 25, 
   width: 25
 }).load(function(){
   $(this.css({
    'background-image': null, 
     height: 'auto', 
     width: 'auto'
   });
 });

Or something to that effect... note height and width should be the size of the loaing image... unless you know the size of the image youre pulling down.

Answer 5

Preloading is not the way to go. If your image is directly visible in your application, your browser will load it as fast as possible and will not be able to load it faster using Javascript.

What you can do is to load it slower.

You seem to consider the image loading is slow because you want it to be immediate. Hard to be faster than immediate.

Maybe you can try the other way. Design your application so that the chart is displayed when the user interacts with something (click a button, a link, etc.), then load the chart whenever the user asks for it.

I see 2 advantages to this, mainly for low bandwidth users (mobile users?):

• users who don't want the chart won't be disturbed by its long loading process
  • you know like page layout changing while image is loaded
• the initial bandwidth usage of your application will be lower which will make it look more responsive
  • the less images to load initially, the faster the browser will be ready

Idea shamelessly stolen from AppleInsider mobile-version

Answer 6

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'});