JS-Bilder während laden austauschen

Luke1995 · 16.10.2009

Hallo zusammen,

auf meiner Website hab ich im Moment ein ziemlich... ähmmm... nervendens Problem. :motz:

Ich hab eine JS Gallerie gefunden, die die Bilder eigentlich ganz passend wiedergibt.
Allerdings sieht das dann mehr als dürftig aus, wenn die Bilder laden...
Angedachte Lösung: Die Bilder während sie laden mithilfe von Javascript austauschen.
Problem : ich bin ne absolute Niete in Javascript:'(

Vielleicht kann mir ja einer von euch helfen

So hier das Script:

Code:

<body>
        <ul>
            <div id="obenlinks2"></div>
            <div id="untenlinks2"></div>
            <div id="untenrechts2"></div>
            <div id="obenrechts2"></div>
        </ul>
    <div id="border2">
         <a href="index.htm"><img src="bilder/logo.png" width="573" height="73" class="logo" alt="Logo"/></a>
    </div>


<div id="rotator">
    <img src="portfolio/bild1.jpg" id="rotator"/>
    <img src="portfolio/bild2.jpg" id="rotator"/>
    <img src="portfolio/bild3.jpg" id="rotator"/>
    <img src="portfolio/bild4.jpg" id="rotator"/>
    <img src="portfolio/bild5.jpg" id="rotator"/>
    <img src="portfolio/bild6.jpg" id="rotator"/>
    <img src="portfolio/bild7.jpg" id="rotator"/>
    <img src="portfolio/bild8.jpg" id="rotator"/>
    <img src="portfolio/bild9.jpg" id="rotator"/>
    <img src="portfolio/bild10.jpg" id="rotator"/>
    <img src="portfolio/bild11.jpg" id="rotator"/>
    <img src="portfolio/bild12.jpg" id="rotator"/>
</div>

<script language="JavaScript">
var bild1=document.images.bild1.complete;
var bild2=document.images.bild2.complete;
var bild3=document.images.bild3.complete;
var bild4=document.images.bild4.complete;
var bild5=document.images.bild5.complete;
var bild6=document.images.bild6.complete;
var bild7=document.images.bild7.complete;
var bild8=document.images.bild8.complete;
var bild9=document.images.bild9.complete;
var bild10=document.images.bild10.complete;
var bild11=document.images.bild11.complete;
var bild12=document.images.bild12.complete;


var test=bild1 && bild2 && bild3 && bild4 && bild5 && bild6 && bild7 && bild8 && bild9 && bild10 && bild11 &bild12;

function hallo(){
    if(test=false){
        document.write('<img src="portfolio/loading.gif" id="loading" alt="loading"');}
    else{
        hallo();
    }
}


</script>



</body>

Lg lukas

achso website ist thepikture.de

r3nt5ch3r · 16.10.2009

AW: JS-Bilder während laden austauschen

hab ma ne ganz simple Idee dafür:

HTML:

...
<script>
function onBodyLoaded(){
    document.getElementById("loading").style.display = 'none';
}
</script>

<body onLoad="onBodyLoaded()">
<div id="loading">LOADING!</div>
...

onBodyLoaded() wird aufgerufen wenn die Seite fertig geladen ist und blendet dann das div mit der id:loading aus!? Ist es das was du wolltest? Das Div und den Inhalt des Divs kannst du natürlich anpassen.
Klug wärs evlt auch das div mit id:rotator zu Beginn auszublenden und dann von der Funktion onBodyLoaded() wieder einzublenden...usw...^^

Luke1995 · 16.10.2009

AW: JS-Bilder während laden austauschen

Hey danke

das ist ne super Idee und funktioniert auch soweit

Soll ich dich vielleicht mal auf meiner Website erwähnen oder so?

Lg lukas