web-dev-qa-db-fra.com

Comment afficher le message de chargement lors du chargement d'un iFrame?

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

Est-il possible d'afficher un message de chargement pendant que iframe charge, l'utilisateur ne voit pas un grand espace vide?

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

javascriptjqueryiframe
71
Jacob

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

Je pense que cela va aider: 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;
}
27
Minko Gechev
$('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>
5
Salt Hareket

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, insérez simplement un identifiant dans le div et remplacez cette partie du code:

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

par quelque chose comme ceci:

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

Bonne chance!

2
David Toledo

J'ai suivi l'approche suivante

Tout d'abord, ajoutez div div.

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

et puis quand l'iframe a terminé le chargement

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

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 événement onload à l'iframe ...

 $(document).ready(function() {

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

Bonne chance

0
maxijb

Vous pouvez utiliser comme ci-dessous

$('#showFrame').on("load", function () {
        loader.hide();
});
0
Ramesh Narayan
<!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/[email protected]&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>
0
Romi