I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.

I have a website with a menu, when menu item is clicked I display the page for that menu in an iframe(iframe is set to display home page initially by default). sometimes it could take few seconds to display the page for the selected menu item (for example reports) and I would like to display a loading image while the page is loading. how to do this using javascript or jQuery (sample code will be helpful)? thanks in advance.

• javascript
• asp
• jquery
• css
• ajax

Share Improve this question Follow edited Nov 26, 2010 at 12:44 RKP asked Nov 26, 2010 at 12:32 RKPRKP 5,3952323 gold badges7373 silver badges113113 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Add the loading image to the iframe innerHTML ( or to a div and stop using iframe ) , then use ajax to fetch the new page content , on success iframe innerHTML bees the content fetched by ajax witch overwrites the loading image . easy to setup but i reend you stop using iframes

Usually you cannot know when the page finished loading in an iframe. The iframe loading is independent. What you can do is to get the content of the page that you have in the iframe through a ajax get request, and in this way do an animation while you wait for the content.

write a function to show the image and call it when you set the iframe src. when the page is loaded call from within the loaded page a function to hide the image (parent.HideImage) I think the onload event of the iframe is not supported in all browsers