Comment afficher le message de chargement lorsqu'un iFrame est en cours de chargement?

J'ai un iframe qui charge un site Web tiers extrêmement lent à charger.

Existe-t-il un moyen d'afficher un message de chargement pendant que l'iframe se charge, l'utilisateur ne voit pas un grand espace vide?

PS. Notez que l'iframe est pour un site Web tiers, donc je ne peux rien modifier / injecter sur leur page.

J'ai fait l'approche css suivante:

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

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

Je pense que ce code va aider:

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

S'il ne s'agit que d'un espace réservé que vous essayez de réaliser: une approche folle consiste à injecter du texte comme fond svg. Cela permet une certaine flexibilité, et d'après ce que j'ai lu, le support du navigateur devrait être assez correct (je ne l'ai pas testé cependant):

• Chrome> = 27
• Renard de feu> = 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;
}

Que pouvez-vous changer?

À l'intérieur de la valeur d'arrière-plan:

• taille de la police: recherchez font-size = "" et changez la valeur en ce que vous voulez

• couleur de la police: recherchez fill = "" . N'oubliez pas de remplacer le # par% 23 si vous utilisez la notation hexadécimale des couleurs. % 23 représente un # dans le codage URL qui est nécessaire pour que la chaîne svg puisse être analysée dans FireFox.

• famille de polices: recherchez font-family = "" n'oubliez pas d'échapper les guillemets simples si vous avez une police composée de plusieurs mots (comme avec \ 'Lucida Grande \')

• text: recherchez la valeur de l'élément text-element où vous voyez la chaîne PLACEHOLDER . Vous pouvez remplacer la chaîne PLACEHOLDER par tout ce qui est conforme à l'URL (les caractères spéciaux doivent être convertis en notation en pourcentage)

Exemple sur violon

Avantages:

• Aucun élément HTML supplémentaire
• Pas de js
• Le texte peut facilement (...) être ajusté sans avoir besoin d'un programme externe
• C'est SVG, vous pouvez donc facilement y mettre n'importe quel SVG.

Les inconvénients:

• Prise en charge du navigateur
• C'est complexe
• C'est hacky
• Si l'iframe-src n'a pas d'arrière-plan défini, l'espace réservé brillera (ce qui n'est pas inhérent à cette méthode, mais juste un comportement standard lorsque vous utilisez un bg sur l'iframe)

Je ne le recommanderais que s'il est absolument nécessaire d'afficher le texte comme espace réservé dans une iframe qui nécessite un peu de flexibilité (plusieurs langues, ...). Prenez un moment et réfléchissez-y: tout cela est-il vraiment nécessaire? Si j'avais le choix, je choisirais la méthode de @ 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>

Voici une solution rapide pour la plupart des cas:

CSS:

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

Vous pouvez utiliser un GIF de chargement animé si vous le souhaitez,

HTML:

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

À l'aide de l'événement onload, vous pouvez supprimer l'image de chargement une fois la page source chargée dans votre iframe.

Si vous n'utilisez pas jQuery, mettez simplement un identifiant dans le div et remplacez cette partie de code:

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

par quelque chose comme ça:

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

Bonne chance!

Oui, vous pouvez utiliser un div transparent positionné sur la zone iframe, avec un gif de chargeur comme arrière-plan uniquement.

Ensuite, vous pouvez attacher un onloadévénement à l'iframe:

 $(document).ready(function() {

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

J'ai suivi l'approche suivante

Tout d'abord, ajoutez un div frère

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

puis lorsque l'iframe a terminé le chargement

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

Vous pouvez utiliser comme ci-dessous

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