"Please wait" beim Laden von iframes

rernanded

Erfahrenes Mitglied
Hallo
mit folgendem Script lade ich immer wider durch prev oder next neue Seiten in ein iframe.
Manche dieser Seiten laden sehr langsam, also würde ich gerne einen Hinweis einbauen solange geladen wird, der dann auch wieder verschwindet. Mit einem einfachen onload ist da nix zu machen.
Hatte auch schon Versuche mit jquery, aber auch Fehlanzeige.
Alternative?

Zusätzlich wäre eine Idee hilfreich die es mir erlaubt eine max. Wartezeit einzustellen, so daß dann einfach automatisch die jeweils nächste URL "aufgerufen" wird.

Moni

HTML:
<?php
$db_link = mysqli_connect (
                     'server',
                     'user',
                     'pw',
                     'db'
                    );
$sql = "SELECT * FROM urls LIMIT 0,100";
$db_erg = mysqli_query( $db_link, $sql );
if ( ! $db_erg )
{
  die('Dies ist eine ungültige Abfrage.' . mysqli_error());
}
$urls = [];
while ($row = mysqli_fetch_object($db_erg)) {
$urls[] = $row->url;
}
?>
<!DOCTYPE html>
<html>
<head>
<script>
    function hideLoader() {
        document.getElementById('loader').style.display = "none";
    }
</script>
<style>
.iframe {
width: 654px;
height: 321px;
        -transform: scale(1.0);
        -moz-transform: scale(1.0);     
        -o-transform: scale(1.0);
        -ms-transform: scale(1.0);     
        -webkit-transform: scale(1.0);     
}
#loader {
    position:absolute;
    left:50%;
    top:50%;
    border-radius:30px;
    padding:30px;
    border:1px solid #123456;
    background:#ffffff;
    box-shadow:0px 0px 10px #123456;
}
</style>
<script type="text/javascript">
var URLs = <?php echo json_encode($urls); ?>;
var currURL = 0;
function previframe() {
    if (currURL == 0) currURL = (URLs.length -1);
      else currURL--;
    document.getElementById("iframeeins").src = URLs[currURL];
}
function nextiframe() {
    currURL = (currURL + 1) % URLs.length;
    document.getElementById("iframeeins").src = URLs[currURL];
}
</script>
</head>

<body>
       <iframe src="<?php echo $urls[0]; ?>" id="iframeeins" class="iframe" name="iframeeins" sandbox="allow-scripts" onload="hideLoader();"></iframe>
       <button onclick="previframe()">PREV</button><button onclick="nextiframe()">NEXT</button>
       <div id="loader">Please wait</div>
</body>
</html>
 
Zuletzt bearbeitet:
Wie wäre es, wenn die zu geladene Seite ein Script enthält, welches den Loader versteckt?

So z.B.
Javascript:
function hideLoader( ) {
  
   if (window.parent != window.top) {
       window.parent.getElementById('loader').className = 'nodisplay';
   }
}

Wobei nodisplay eine CSS Klasse ist:
CSS:
.nodisplay {
    display: none;
}
 
Zuletzt bearbeitet:
@merzi86: Nee, das geht nicht.

Wobei
window.getElementById('loader').style.display = "none";
schon mal ein Fortschritt ist gegenüber
document.getElementById('loader').style.display = "none";

Mein loader-div wird zumindest angezeigt, was vorher nicht der Fall war.

Ich denke mal es hat etwas zu tun damit, ob ich window oder document schreibe und/oder wie ich es kombiniere.

Hier gibt es eine Erklärung: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/
 
Zuletzt bearbeitet:
Zurück