Bir iFrame yüklenirken yükleme mesajı nasıl görüntülenir?

Yüklemesi son derece yavaş olan bir üçüncü taraf web sitesini yükleyen bir iframe'im var.

İframe yüklenirken kullanıcı büyük bir boşluk görmezken bir yükleme mesajı görüntüleyebilmemin bir yolu var mı?

PS. İframe'in üçüncü taraf bir web sitesi için olduğunu unutmayın, bu nedenle sayfalarında hiçbir şeyi değiştiremiyorum / enjekte edemiyorum.

Aşağıdaki css yaklaşımını yaptım:

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

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

Bu kodun yardımcı olacağını düşünüyorum :

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

Yalnızca elde etmeye çalıştığınız bir yer tutucuysa: Çılgın bir yaklaşım, metni bir svg arka planı olarak enjekte etmektir. Biraz esnekliğe izin veriyor ve okuduğuma göre tarayıcı desteği oldukça iyi olmalı (yine de test etmedim):

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

Neyi değiştirebilirsin?

Arka plan değerinin içinde:

• font size: font-size = "" arayın ve değeri istediğiniz herhangi bir şeye değiştirin

• yazı tipi rengi: fill = "" arayın . Onaltılık renk gösterimi kullanıyorsanız # karakterini% 23 ile değiştirmeyi unutmayın. % 23, svg-dizesinin FireFox'ta ayrıştırılabilmesi için gerekli olan URL kodlamasında # anlamına gelir.

• Yazı tipi ailesi: için göz font-family = "" Eğer (\ 'Lucida Grande \' ile benzeri) Birden fazla kelime oluşan bir yazı varsa tek tırnak kaçmayı unutmayın

• metin: PLACEHOLDER dizesini gördüğünüz metin öğesinin öğe değerini arayın . PLACEHOLDER dizesini url uyumlu herhangi bir şeyle değiştirebilirsiniz (özel karakterlerin yüzde gösterimine dönüştürülmesi gerekir)

Keman üzerine örnek

Artıları:

• Ekstra HTML öğesi yok
• Js yok
• Harici bir programa ihtiyaç duymadan metin kolayca (...) ayarlanabilir
• Bu SVG'dir, böylece istediğiniz herhangi bir SVG'yi oraya kolayca yerleştirebilirsiniz.

Eksileri:

• Tarayıcı desteği
• Karmaşık
• Bu hileli
• İframe-src'nin bir arka plan ayarı yoksa, yer tutucu öne çıkar (bu, bu yönteme özgü değildir, ancak iframe üzerinde bir bg kullandığınızda yalnızca standart davranıştır)

Bunu yalnızca, metni biraz esneklik (birden çok dil, ...) gerektiren bir iframe'de yer tutucu olarak göstermek kesinlikle gerekliyse öneririm. Bir dakikanızı ayırın ve düşünün: tüm bunlar gerçekten gerekli mi? Seçme şansım olsaydı @ Christina'nın yöntemini seçerdim

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

İşte çoğu durum için hızlı bir çözüm:

CSS:

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

İsterseniz animasyonlu bir GIF yükleme kullanabilirsiniz.

HTML:

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

Onload olayını kullanarak yükleme görüntüsünü, kaynak sayfa iframe'inize yüklendikten sonra kaldırabilirsiniz.

JQuery kullanmıyorsanız, div'e bir id girin ve kodun bu kısmını değiştirin:

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

bunun gibi bir şeyle:

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

Herşey gönlünce olsun!

Evet, yalnızca arka plan olarak bir yükleyici gif ile iframe alanı üzerinde konumlandırılmış şeffaf bir div kullanabilirsiniz.

Ardından onloadiframe'e bir olay ekleyebilirsiniz :

 $(document).ready(function() {

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

Aşağıdaki yaklaşımı izledim

Önce kardeş div ekleyin

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

ve sonra iframe yüklemeyi tamamladığında

$("#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>

Aşağıdaki gibi kullanabilirsiniz

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