✔ während bild lädt hinweis
- Themenstarter paini2008
- Beginndatum
- Status
M
Maik
Hi,
in dem Thread rotierender Kreis als Fortschrittsanzeige findest du neben einem Link zu solchen Grafiken, einen möglichen Lösungsansatz von Quaese.
mfg Maik
in dem Thread rotierender Kreis als Fortschrittsanzeige findest du neben einem Link zu solchen Grafiken, einen möglichen Lösungsansatz von Quaese.
mfg Maik
Abro
Mitglied
Kann man machen und ist gar nicht so kompliziert.
Das ganze kann man sich aber sparen wenn man wirklich nur die kleinen Grafiken aus Maiks Link im Hintergrund anzeigt.
also z.b.
Noch ein bisschen zentrieren und fertig wärs.
Will man da aber große Hinweise einbauen wie z.B. DeviantArt, müsste man die entsprechende Grafik vor allen anderen laden. Mit window.onload() oder $(document).ready() wird das aber nichts ;O)
Das ganze kann man sich aber sparen wenn man wirklich nur die kleinen Grafiken aus Maiks Link im Hintergrund anzeigt.
also z.b.
Code:
<span style="background:url(loading.gif);"><img src="grosses_bild.jpg" alt="ich brauche lange zum laden" /></span>Will man da aber große Hinweise einbauen wie z.B. DeviantArt, müsste man die entsprechende Grafik vor allen anderen laden. Mit window.onload() oder $(document).ready() wird das aber nichts ;O)
Hi,
vielleicht hilft dir hier auch der onload-Event des img-Tags weiter.
Ein kleines Beispiel:
Ciao
Quaese
vielleicht hilft dir hier auch der onload-Event des img-Tags weiter.
Ein kleines Beispiel:
Code:
<html>
<head>
<title></title>
<style type="text/css">
<!--
body, html{ height: 100%;}
.loadImg{ position: absolute;
left: 50%;
top: 50%;
margin: -8px 0 0 -8px;
display: none;
z-index: 99;}
//-->
</style>
<script type="text/javascript">
<!--
function loadImage(){
// Bild einblenden
document.getElementById("imgID").style.display = "inline";
// Neues Bildobjekt erstellen
var objImg = new Image();
objImg.src = "../bilder/farben.jpg";
// onload-Event nutzen um Ladegrafik auszublenden und das gewünschte Bild einzuhängen
objImg.onload = function(){
document.getElementById("imgID").style.display = "none";
document.getElementById("imgContainer").appendChild(this);
}
}
//-->
</script>
</head>
<body>
<img class="loadImg" id="imgID" src="../bilder/ajax-loader_01_trans.gif" width="16" height="16" border="0" alt="">
<button onclick="loadImage();">Bild laden</button>
<div id="imgContainer"></div>
</body>
</html>Quaese
- Status
