matze: Javascript Bilder vorladen (CSS)

Beitrag lesen

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