Cách hiển thị thông báo tải khi iFrame đang tải?

Question

Tôi có khung nội tuyến tải trang web của bên thứ ba tải rất chậm.

Có cách nào tôi có thể hiển thị thông báo tải trong khi khung nội tuyến tải người dùng không nhìn thấy khoảng trống lớn không?

PS. Lưu ý rằng iframe dành cho trang web của bên thứ ba nên tôi không thể sửa đổi/chèn bất kỳ thứ gì trên trang của họ.

Answer 1

Tôi đã làm phương pháp css sau:

<div class="holds-the-iframe"><iframe here></iframe></div> 


.holds-the-iframe { 
    background:url(../images/loader.gif) center center no-repeat; 
} 

Answer 2

Có, bạn có thể sử dụng div trong suốt được đặt trên khu vực khung nội tuyến, với gif trình tải làm nền duy nhất.

Sau đó, bạn có thể đính kèm một sự kiện onload đến iframe ...

$(document).ready(function() { 

    $("iframe#id").load(function() { 
     $("#loader-id").hide(); 
    }); 
}); 

Chúc may mắn

Answer 3

Tôi nghĩ rằng điều này sẽ giúp: http://jsfiddle.net/UVsdh/

JS:

$('#foo').ready(function() { 
    $('#loadingMessage').css('display', 'none'); 
}); 
$('#foo').load(function() { 
    $('#loadingMessage').css('display', 'none'); 
}); 

HTML:

<iframe src="http://google.com/" id="foo"></iframe> 
<div id="loadingMessage">Loading...</div> 

CSS:

#loadingMessage { 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background: #ccc; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
} 

Answer 4

$('iframe').load(function(){ 
     $(".loading").remove(); 
    alert("iframe is done loading") 
}).show(); 


<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/> 
<div class="loading" style="width:600px;height:300px;">iframe loading</div> 

Answer 5

Nếu nó chỉ là một giữ chỗ bạn đang cố gắng để đạt được : một cách tiếp cận điên rồ là chèn văn bản dưới dạng nền svg. Nó cho phép đối với một số flexbility, và từ những gì tôi đã đọc các trình duyệt hỗ trợ nên được khá phong nha (đã không kiểm tra nó mặc dù):

• Chrome> = 27
• FireFox> = 30
• Internet Explorer> = 9
• Safari> = 5,1

html:

<iframe class="iframe-placeholder" src=""></iframe> 

css:

.iframe-placeholder 
{ 
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat; 
} 

Bạn có thể thay đổi điều gì?

Bên trong background-giá trị:

• cỡ chữ: tìm kiếm font-size = "" và thay đổi giá trị bất cứ điều gì bạn muốn

• font color: tìm kiếm điền = "".Đừng quên thay thế # bằng% 23 nếu bạn đang sử dụng ký hiệu màu thập lục phân. % 23 là viết tắt của mã hóa # trong URL cần thiết cho chuỗi svg để có thể được phân tích cú pháp trong FireFox.

• gia đình

  phông chữ: tìm kiếm font-family = "" nhớ để thoát khỏi dấu nháy đơn nếu bạn có một phông chữ mà bao gồm nhiều từ (như với \ 'Lucida Grande \')

• văn bản : tìm giá trị phần tử của phần tử văn bản, nơi bạn thấy chuỗi PLACEHOLDER. Bạn có thể thay thế các chuỗi GIỮ CHỖ với bất cứ điều gì đó là url-compliant (ký tự đặc biệt cần phải được chuyển đổi sang ký hiệu phần trăm)

dụ: http://jsfiddle.net/8t56Ljw0/

Ưu điểm:

• Không thêm về HTML các yếu tố
• Không js
• Văn bản có thể dễ dàng (...) được điều chỉnh mà không cần chương trình bên ngoài
• Đó là SVG, vì vậy bạn có thể dễ dàng đặt bất kỳ SVG nào bạn muốn trong đó.

Nhược điểm:

• Hỗ trợ trình duyệt
• Nó phức tạp
• Đó là hacky
• Nếu cho iframe src không có một bộ nền, giữ chỗ sẽ tỏa sáng qua (đó là không cố hữu với phương pháp này, nhưng chỉ là hành vi tiêu chuẩn khi bạn sử dụng bg trên khung nội tuyến)

Tôi sẽ chỉ đề nghị điều này chỉ khi nó hoàn toàn cần thiết để hiển thị văn bản như một trình giữ chỗ trong khung nội tuyến yêu cầu một chút linh hoạt (nhiều ngôn ngữ, ...). Chỉ cần mất một chút thời gian và suy nghĩ về nó: là tất cả điều này thực sự cần thiết? Nếu tôi có lựa chọn, tôi sẽ đi theo phương pháp @ Christina