matze: Javascript Bilder vorladen (CSS)

SELF-Forum

Javascript Bilder vorladen (CSS)

matze
– Informationen zu den Bewertungsregeln

Hallo, ich habe ein kleines verständnis Problem beim Bilder vorladen.

Folgendes habe ich vor:

html seite:

  
<html>  
<head>  
  <title>Testpage</title>  
  <script type="text/javascript" src="./jscript.js"></script>  
  <style type="text/css">  
                    #wasserTemp  
      {  
   width:240px;  
   height:240px;  
   position:absolute;  
   top: 20px;  
   left: 20px;  
   padding:0;  
                        border:0;  
   background-image:url("./Images/testbild.png");  
   background-position:center;  
   background-color:#000000;  
   background-repeat:no-repeat;  
   visibility:visible;  
   }  
  
     #wasserIst  
     {  
   width:240px;  
   height:240px;  
   position:absolute;  
   top: 20px;  
   left: 280px;  
   padding:0;  
   border:0;  
   background-image:url("./Images/testbild2.png");  
   background-position:center;  
   background-color:#000000;  
   background-repeat:no-repeat;  
   visibility:hidden;  
      }  
  </style>  
 </head>  
 <body onload="Delay()">  
  
  <div id="wasserTemp"></div>  
  <div id="wasserIst"></div>  
  
 </body>  
</html>

So siehts jetzt bisher aus. Allerdings habe ich Probleme beim laden der Bilder. Deshalb möchte ich die im CSS Teil angegebenen Bilder vorladen und erst nachdem diese vollständig geladen wurden mit meinem Script fortfahren. Soweit so gut, über img.complete kann ich feststellen ob das bild geladen ist. Jedoch ist mein Problem, was muss ich dann unter background-image:url("...") reinschreiben wenn z.B. mein JSCript so aussieht:

  
//global definiert:  
var image=new Array(2);  
  
var imTmp=new Image();  
imTmp.src=("./Images/IPods/baden.png");  
if(imTmp.complete==true)  
{  
   image[0]=imTmp;  
}

Ich würde jetzt gern etwas wie:

  • onload = Delay() hier werden alle Bilder geladen
  • alle Bilder geladen --> Bilder werden backround-image im css zugewiesen
  • Bilder werden sichtbar geschalten
  • weitere Aktionen

Hat hierfür evtl jemand eine kleine Hilfestellung? bin nämlich völlig planlos wie das funktioniert im Moment.

Vielen Dank schonmal

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Javascript Bilder vorladen (CSS)

    LX
    – Informationen zu den Bewertungsregeln

    Hallo!

    Das Vorladen der Bilder bringt Dir keinen wirklichen Zeitvorteil für die Darstellung. Stelle sicher, dass width und height bei allen Bildern angegeben sind - bei Hintergrundbildern ohnehin unnötig.

    Ansonsten wird das CSS ohnehin erst angezeigt, wenn es geladen ist, je nach Browser also bei der ersten oder zweiten Rendering-Schleife.

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln