Preloader

N

NiciB

Erfahrenes Mitglied
Hallo!

Ich habe eine Seite mit dem Drupal CMS erstellt. Da gibt es einen Link der in einem iFrame eine externe Seite ladet. Das Problem an der Sache ist, dass die externe Seite relativ lange zum laden braucht und bis dahin nur eine weisse Seite erscheint. Jetzt wuerde ich gerne eine Grafik einfuegen die anzeigt das geladen wird bis die Seite geladen ist und danach zur Seite wechseln.

Wie ist das am einfachsten umzusetzen?

Vielen Dank!
 
ich habe nichts gefunden was fuer mich passt! Meistens ist es nicht so einfach einzubauen, schon gar nicht wenn ich an einem CMS arbeite. Es muss ja auch kein "wirklicher" preloader sein, er soll nur die Zeit ueberbruecken bis das iFrame galaden ist.

Ich habe es jetzt mit folgendem Trick versucht: Ich habe eine Tabelle erstellt, die als Hintergrundbild mein preloader-Bild enthaelt. In der Tabelle befindet sich auch das iFrame. Da erscheint jetzt solange das Bild bis die Seite endgueltig erscheint! Das waere ja genau das was ich suche, nur funktioniert das beim IE nicht, beim FF aber einwandfrei!

Hat jemand vielleicht eine Idee wie man das noch anstellen koennte? Irgendwie mit Layer ein und ausblenden oder so...
 
Moin,

dein Trick hört sich schon mal gut an :)

So sollte es auch hinhauen:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="author"             content="doktormolle">
<meta name="date"               content="2008-09-26">
<title>iframe(extern)-Preloader</title>
<script type="text/javascript">
<!--
function preload(o)
{
  o=document.getElementById(o).style.visibility='hidden';
  return true;
}
//-->
</script>
<style type="text/css">
<!--
.preload{
  display:inline;
  background:url(http://www.tutorials.de/forum/images/misc/13x13progress.gif) 50% 50% no-repeat;
}
-->
</style>
</head>
<body>
<a href="http://www.tutorials.de" target="extern" onclick="return preload(this.target)">tutorials.de</a><br />
<div class="preload"><iframe src="http://www.google.de"  onload="this.style.visibility='visible'" style="width:400px;height:300px;"  name="extern" id="extern"></iframe></div>
</body>
</html>

Das Elternelement des iframe (hier ein div statt Tabelle)hat das entsprechende Hintergrundbild.
Beim Klick auf den Link wird das iFrame selbst ausgeblendet, das Hintergrundbild wird sichtbar.
Beim onload des iframe wird selbiges wieder angezeigt...und das Hintergrundbild wird durch das iframe wieder überdeckt :)

(Beachte, dass das iframe dieselbe ID wie als name hat für den eindeutigen Zugriff)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück