it-swarm.com.de

Wie wird die Lademeldung angezeigt, wenn ein iFrame geladen wird?

Ich habe einen iframe, der eine Website eines Drittanbieters lädt, die extrem langsam lädt.

Gibt es eine Möglichkeit, eine Lademeldung anzuzeigen, während der iframe geladen wird, sieht der Benutzer keinen großen freien Platz?

PS. Beachten Sie, dass der iframe für eine Website eines Drittanbieters ist. Ich kann also nichts auf ihrer Seite ändern oder hinzufügen.

71
Jacob

Ich habe den folgenden CSS-Ansatz verwendet:

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


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

Ich denke, dass dies helfen wird: 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

Wenn es sich nur um einen Platzhalter handelt, den Sie erreichen möchten: Ein verrückter Ansatz ist das Einfügen von Text als SVG-Hintergrund. Es erlaubt eine gewisse Flexibilität und nach dem, was ich gelesen habe, sollte die Browserunterstützung ziemlich anständig sein (habe es aber nicht getestet):

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

Was kannst du ändern?

Innerhalb des Hintergrundwertes:

  • schriftgröße: Suchen Sie nach font-size = "" und ändern Sie den Wert in einen beliebigen Wert

  • schriftfarbe: Suchen Sie nach fill = "" . Vergessen Sie nicht, das # durch% 23 zu ersetzen, wenn Sie die hexadezimale Farbnotation verwenden. % 23 steht für ein # in der URL-Codierung, die erforderlich ist, damit der SVG-String in FireFox analysiert werden kann.

  • schriftfamilie: Suchen Sie nach font-family = "" . Denken Sie daran, die einfachen Anführungszeichen zu umgehen, wenn Sie eine Schriftart haben, die aus mehreren Wörtern besteht (wie bei\' Lucida Grande\')

  • text: Suchen Sie nach dem Elementwert des Textelements, in dem Sie die Zeichenfolge PLACEHOLDER sehen. Sie können den PLACEHOLDER-String durch einen URL-kompatiblen String ersetzen (Sonderzeichen müssen in Prozentschreibweise konvertiert werden).

Beispiel für Geige

Vorteile:

  • Keine zusätzlichen HTML-Elemente
  • Nein js
  • Text kann leicht (...) angepasst werden, ohne dass ein externes Programm erforderlich ist
  • Es handelt sich um SVG, sodass Sie problemlos alle gewünschten SVG-Dateien einfügen können.

Nachteile:

  • Browser-Unterstützung
  • Es ist komplex
  • Es ist abgedreht
  • Wenn für den iframe-src kein Hintergrund festgelegt ist, wird der Platzhalter durchscheinend angezeigt (was dieser Methode nicht eigen ist, sondern nur das Standardverhalten bei Verwendung eines BG für den iframe).

Ich würde dies nur empfehlen, wenn es absolut notwendig ist, Text als Platzhalter in einem iframe anzuzeigen, der ein wenig Flexibilität erfordert (mehrere Sprachen, ...). Nehmen Sie sich einen Moment Zeit und überlegen Sie: Ist das alles wirklich notwendig? Wenn ich die Wahl hätte, würde ich mich für @ Christinas Methode entscheiden

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

Hier ist eine schnelle Lösung für die meisten Fälle:

CSS:

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

Sie können eine animierte Lade-GIF verwenden, wenn Sie möchten.

HTML:

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

Mit dem Onload-Ereignis können Sie das Ladebild entfernen, nachdem die Quellenseite in Ihren iframe geladen wurde.

Wenn Sie jQuery nicht verwenden, geben Sie einfach eine ID in das div ein und ersetzen Sie diesen Teil des Codes:

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

von so etwas:

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

Alles Gute!

2
David Toledo

Ich habe den folgenden Ansatz verfolgt

Zuerst füge Geschwister div hinzu

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

und dann, wenn der iFrame das Laden abgeschlossen hat

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

Ja, Sie könnten ein transparentes div verwenden, das sich über dem iframe-Bereich befindet, wobei das Loader-Gif nur als Hintergrund dient. 

Dann können Sie ein Onload-Ereignis an den iframe anhängen ...

 $(document).ready(function() {

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

Viel Glück

0
maxijb

Sie können wie folgt verwenden

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