How to display loading image while actual image is downloading

Question

Sometimes images take some time to render in the browser  I want to show a busy image while the actual image is downloading  and when the image is downloaded  the busy image is removed and the actual image should be shown  How can I do this with JQuery or any javascript

User · Answer

Use a javascript constructor with a callback that fires when the image has finished loading in the background  Just used it and works great for me cross-browser  Here s the thread with the answer

User · Answer

Instead of just doing this quoted method from  https   stackoverflow com a 4635440 3787376      You can do something like this      show loading image     loader img   show        main image loaded       main img   on  load   function         hide remove the loading image       loader img   hide              You assign load event to the image which fires when image has   finished loading  Before that  you can show your loader image    you can use a different jQuery function to make the loading image fade away  then be hidden      Show the loading image      loader img   show        When main image loads      main img   on  load   function         Fade out and hide the loading image        loader img   fadeOut 100      Time in milliseconds            Once the opacity reaches 0  the display style property is set to none     http   api jquery com fadeOut    Or you could not use the jQuery library because there are already simple cross-browser JavaScript methods

User · Answer

I use a similar technique to what  Sarfraz posted  except instead of hiding elements  I just manipulate the class of the image that I m loading      lt style type  text css  gt   loading   background-image  url loading gif      loaderror   background-image  url loaderror gif      lt  style gt       lt img id  image  class  loading    gt       lt script type  text javascript  gt      var img   new Image        img onload   function             i   document getElementById  image            i removeAttribute  class            i src   img src             img onerror   function             document getElementById  image   setAttribute  class    loaderror               img src    http   path to image png    lt  script gt    In my case  sometimes images don t load  so I handle the onerror event to change the image class so it displays an error background image  rather than the browser s broken image icon

User · Answer

You can do something like this      show loading image     loader img   show        main image loaded       main img   on  load   function         hide remove the loading image       loader img   hide          You assign load event to the image which fires when image has finished loading  Before that  you can show your loader image

User · Answer

Just add a background image to all images using css   img     background  url  loading gif   no-repeat

[jquery] How to display loading image while actual image is downloading

Examples related to jquery