Đây là một giải pháp nhanh chóng cho hầu hết các trường hợp:
CSS:
.iframe-loading {
background:url(/img/loading.gif) center center no-repeat;
}
Bạn có thể sử dụng GIF tải động nếu bạn muốn,
HTML:
<div class="iframe-loading">
<iframe src="http://your_iframe_url_goes_here" onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>
Sử dụng sự kiện tải lên, bạn có thể xóa hình ảnh đang tải sau khi trang nguồn được tải bên trong iframe của bạn.
Nếu bạn không sử dụng jQuery, chỉ cần đặt một id vào div và thay thế phần mã này:
$('.iframe-loading').css('background-image', 'none');
bởi một cái gì đó như thế này:
document.getElementById("myDivName").style.backgroundImage = "none";
Tất cả tốt nhất!