jquery wait until iframe is loaded

Question

Hello, I'm using a button in order to change the src of an iframe when I click it this way:

$("#iframe").attr('src',"someurl");

Is there any way to display a "Please wait" message or a gif loader until the new URL is loaded?

possible duplicate of [Javascript callback when IFRAME is finished loading?](http://stackoverflow.com/questions/164085/javascript-callback-when-iframe-is-finished-loading) — Christofer Eliasson, Jul 16 '12 at 08:55

score 5 · Answer 1 · answered Jul 16 '12 at 09:00

5

Why not use jQuery.load function which has a callback for managing displayed text:

HTML

<button id="myLoadButton">Load</button>
<div id="Myiframe"></div>

JS

$('#myLoadButton').click(function(){
   $(this).text('Please wait...');
   $('#Myiframe').load('ajax/test.html', function(){
      $('#myLoadButton').text('Content loaded!');
   });
})

answered Jul 16 '12 at 09:00

shershen

9,875
11
39
60

2

I was going to down vote but maybe I am missing something, so even if CROSS ORIGIN POLICY wasn't an issue and you would load google.com what about all the styles and scripts that would override your own? – Neo May 03 '13 at 16:02

score 1 · Answer 2 · answered Aug 19 '15 at 09:19

the src property just set the url for the frame but the load function is maintain by the jquery engine.so ajax global functions waits for load() function to complete

 $("#iframe").attr('src',"someurl");

First make sure the ajax event be asynchronous and use this,

 $('#iframe').load('someurl');

this is the only way to display a "Please wait" message or a gif loader until the new URL is loaded

jquery wait until iframe is loaded

2 Answers2