Hiển thị hoạt ảnh tải cho khung nội tuyến trong hộp thoại giao diện người dùng jQuery

Question

Chuyên gia giao diện người dùng, Tôi đang cố gắng tải trang web chậm trong khung nội tuyến trong hộp thoại jquery, nhưng tôi đang gặp sự cố. Đây là trường hợp của tôi sử dụng:

1. mở một hộp thoại jquery, với một đĩa đơn "đang tải ..." gif
2. tải một URL khác trong nền
3. lần nạp, thay thế các gif với URL

tôi có thể mở URL trực tiếp với mã như sau:

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, 
    }); 

vì vậy, câu hỏi của tôi là - làm thế nào để tôi thêm một "đang tải ..." g nếu để trộn? Nên có thể - nhưng tôi không thể hình dung ra được!

Cảm ơn trước!

Answer 1

Xem này. Hy vọng nó sẽ giúp .. 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 
});​ 

Answer 2

Dưới đây là một ví dụ về việc tạo ra một khung nội tuyến, chuyển nó vào một trang web và thực hiện một cuộc gọi lại khi nó kết thúc tải: 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); 
}); 
​