how can i load an iframe using jquery?

i have this problem i want to load an iframe, but when you insert the iframe in the page, the browser still loads the iframe i.e firefox still shows the loading bar in top of the browser.

i.e.

    $('.data').html('<iframe src ="http://www.muna-abigail.com" width="100%" height="700" 
frameBorder="0"></iframe>');

this still requires the browser to load, but i really just want to load it using jquery, so it gives the feeling that its still instant, i would rather have my own loading bar then to trigger the one in the browsers thanks :))

You can't. The browser will always show the loading thing when accessing data from external sources. The only way to not show the loading thing is to use Ajax (The XMLHTTPRequest object or ActiveXObject for IE).

Haven't tried it. But shouldn't work do this on document.ready?

$(document).ready(function () {
    $('.data').html('<iframe src ="http://www.muna-abigail.com" width="100%" height="700" 
frameBorder="0"></iframe>');
})

Insert iframe tag in ur page and use my Jquery codes below...

 $('#iframe_id').attr({'src' : 'http://www.muna-abigail.com'}).css({'width':'100%' , 'height':'700'});

If you used Ajax calls with jQuery, ie .load() you can use a gif loader to "Load" the page :)

See this, it what you want exactly:

http://www.electrictoolbox.com/load-content-jquery-ajax-loading-image/