Bagaimana cara menampilkan pesan pemuatan ketika iFrame sedang dimuat?

Saya memiliki iframe yang memuat situs web pihak ketiga yang sangat lambat dalam memuat.

Apakah ada cara untuk menampilkan pesan pemuatan sementara iframe memuat pengguna tidak melihat ruang kosong yang besar?

PS. Perhatikan bahwa iframe adalah untuk situs web pihak ketiga jadi saya tidak dapat mengubah / memasukkan apa pun di halaman mereka.

Saya telah melakukan pendekatan css berikut:

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

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

Saya pikir kode ini akan membantu:

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

Jika itu hanya placeholder yang ingin Anda capai: pendekatan gila adalah dengan memasukkan teks sebagai latar belakang-svg. Ini memungkinkan beberapa fleksibilitas, dan dari apa yang saya baca, dukungan browser seharusnya cukup baik (belum mengujinya):

• 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;
}

Apa yang bisa Anda ubah?

Di dalam nilai latar belakang:

• font size: cari font-size = "" dan ubah nilainya menjadi apa pun yang Anda inginkan

• warna font: cari fill = "" . Jangan lupa untuk mengganti # dengan% 23 jika Anda menggunakan notasi warna heksadesimal. % 23 adalah singkatan dari # dalam pengkodean URL yang diperlukan agar string-svg dapat diurai dalam FireFox.

• font family: look for font-family = "" ingatlah untuk menghindari tanda kutip tunggal jika Anda memiliki fonta yang terdiri dari beberapa kata (seperti dengan \ 'Lucida Grande \')

• teks: cari nilai elemen dari elemen teks di mana Anda melihat string PLACEHOLDER . Anda dapat mengganti string PLACEHOLDER dengan apa pun yang sesuai dengan url (karakter khusus perlu diubah menjadi notasi persen)

Contoh biola

Kelebihan:

• Tidak ada elemen HTML tambahan
• Tidak js
• Teks dapat dengan mudah (...) disesuaikan tanpa memerlukan program eksternal
• Ini SVG, jadi Anda dapat dengan mudah memasukkan SVG apa pun yang Anda inginkan di sana.

Kekurangan:

• Dukungan browser
• Itu rumit
• Ini hacky
• Jika iframe-src tidak memiliki set latar belakang, placeholder akan bersinar (yang tidak melekat pada metode ini, tetapi hanya perilaku standar saat Anda menggunakan bg pada iframe)

Saya hanya akan merekomendasikan ini hanya jika benar-benar diperlukan untuk menampilkan teks sebagai placeholder dalam iframe yang membutuhkan sedikit fleksibilitas (banyak bahasa, ...). Luangkan waktu sejenak dan renungkan: apakah semua ini benar - benar perlu? Jika saya punya pilihan, saya akan memilih metode @ Christina

$('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>

Berikut solusi cepat untuk sebagian besar kasus:

CSS:

.iframe-loading { 
    background:url(/img/loading.gif) center center no-repeat; 
}

Anda dapat menggunakan GIF pemuatan animasi jika Anda mau,

HTML:

<div class="iframe-loading">
    <iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

Menggunakan acara onload, Anda dapat menghapus gambar pemuatan setelah halaman sumber dimuat di dalam iframe Anda.

Jika Anda tidak menggunakan jQuery, cukup masukkan id ke div dan ganti bagian kode ini:

$('.iframe-loading').css('background-image', 'none');

dengan sesuatu seperti ini:

document.getElementById("myDivName").style.backgroundImage = "none";

Semua yang terbaik!

Ya, Anda bisa menggunakan div transparan yang ditempatkan di atas area iframe, dengan gif loader sebagai latar belakang saja.

Kemudian Anda dapat melampirkan onloadacara ke iframe:

 $(document).ready(function() {

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

Saya telah mengikuti pendekatan berikut

Pertama, tambahkan div saudara

$('<div class="loading"></div>').insertBefore("#Iframe");

dan kemudian saat iframe selesai dimuat

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/chat?authtext=test@user8.com&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>

Anda dapat menggunakan seperti di bawah ini

$('#showFrame').on("load", function () {
        loader.hide();
});