Showing a loading animation for an iframe in a jQuery UI modal dialog
13,731
Solution 1
See this. Hope it helps.. http://jsfiddle.net/CEJhb/1/
var popup = $('<div id="popup123" class="dialog"><img id="load" src="http://jsfiddle.net/img/logo.png" alt="loading..."/></div>').prependTo('body');
popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
var $iFrame = $('iframe');
$iFrame.load(function() {
$('.dialogIFrame').show();
$('#load').hide();
});
$('.dialogIFrame').attr("src", 'http://www.google.com');
popup.dialog({
modal: true,
title: 'Site',
width: 1000,
height: 500
});
Solution 2
Here is an example of creating an iframe, directing it to a site and performing a callback when it finishes loading: http://jsfiddle.net/74nhr/109/
$(document).ready(function() {
var status = $('#status');
var iframe = $('iframe');
status.val('Loading...'); // show wait
iframe.on('load', function() {
status.val('Done!'); // remove wait, done!
});
setTimeout(function() {
iframe.attr('src', 'http://www.archive.org');
},
1000);
});
Author by
ragebiswas
Updated on June 10, 2022Comments
-
ragebiswas almost 2 years
UI experts, I'm trying to get a slow website loaded in an iframe within a jquery modal dialog, but I'm having trouble. This is my use case:
- open a jquery dialog, with a single "loading..." gif
- load a different URL in the background
- once loaded, replace the gif with the URL
I'm able to open the URL directly with code as below:
var popup = $('<div id="popup123" class="dialog"></div>').prependTo('body'); popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>'); $('.dialogIFrame').attr("src", 'http://myslowsite'); $('.dialogIFrame').show(); popup.dialog({ modal: true, title: 'Site', width: 1000, height: 500, });
So my question is - how do I add a "loading..." gif to the mix? Should be possible - but I can't seem to figure out!
Thanks in advance!