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

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

Gibt es eine Möglichkeit, eine Lademeldung anzuzeigen, während der Iframe geladen wird und der Benutzer keine große Leerstelle sieht?

PS. Beachten Sie, dass der Iframe für eine Website eines Drittanbieters bestimmt ist, sodass ich auf seiner Seite nichts ändern / einfügen kann.

Ich habe den folgenden CSS-Ansatz gemacht:

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

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

Ich denke, dass dieser Code helfen wird:

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

Wenn es nur ein Platzhalter ist, den Sie erreichen möchten: Ein verrückter Ansatz besteht darin, Text als SVG-Hintergrund einzufügen. Es ermöglicht eine gewisse Flexibilität, und nach dem, was ich gelesen habe, sollte die Browserunterstützung ziemlich anständig sein (habe sie jedoch 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 Hintergrundwerts:

• Schriftgröße: Suchen Sie nach font-size = "" und ändern Sie den Wert nach Belieben

• Schriftfarbe: Suche 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, das erforderlich ist, damit die SVG-Zeichenfolge in FireFox analysiert werden kann.

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

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

Beispiel für Geige

Vorteile:

• Keine zusätzlichen HTML-Elemente
• Nein js
• Text kann einfach (...) ohne ein externes Programm angepasst werden
• Es ist SVG, so dass Sie einfach jede gewünschte SVG dort einfügen können.

Nachteile:

• Browser-Unterstützung
• Es ist komplex
• Es ist hacky
• Wenn für den iframe-src kein Hintergrund festgelegt ist, leuchtet der Platzhalter durch (was dieser Methode nicht eigen ist, sondern nur das Standardverhalten, wenn Sie ein bg für den iframe verwenden).

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

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

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 ein animiertes 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 Ereignis onload können Sie das Ladebild entfernen, nachdem die Quellseite 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!

Ja, Sie können ein transparentes Div verwenden, das über dem Iframe-Bereich positioniert ist, mit einem Loader-GIF als einzigem Hintergrund.

Dann können Sie onloaddem iframe ein Ereignis hinzufügen:

 $(document).ready(function() {

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

Ich habe den folgenden Ansatz verfolgt

Fügen Sie zuerst 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(); 
  });

<!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>

Sie können wie folgt verwenden

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