preload - funktioniert im Firefox, aber nicht im IE

M

montii

Mitglied
Hallo alle zusammen,

hab ein kleines Problem. Hab mir einen kleine preload für meine Seite gebastelt der funktioniert im Firefox wunderbar aber im IE funktioniert er nicht. hat einer eine Idee warum?

An getElementByID liegt es nicht, das wird ab Version 5 auch vom IE erkannt.

Danke für eure Hilfe.

Gruß Micha

preload.js

Code: 
var ldlb = 260;
var hdlb = 10;
var delay,adlb,edlb;
var yourImages = new Array(
"images/botton_rand.gif",
"images/haupt.jpg",
"images/links.jpg",
"images/logo.gif",
"images/menu_rand_1.gif",
"images/menu_rand_2.gif",
"images/menu_rand_3.gif",
"images/menu_rand_4.gif",
"images/menu_rand_5.gif",
"images/oben_links.jpg",
"images/oben_rechts.gif",
"images/oben_rechtss.gif",
"images/oben_rechts.jpg",
"images/oben_recshts.jpg",
"images/pf_re_h.gif",
"images/pf_re_n.gif",
"images/pfeil_hi_li.gif",
"images/pfeil_hi_re.gif",
"images/pfeil_nor_li.gif",
"images/pfeil_nor_re.gif",
"images/rechts.jpg",
"images/unten.jpg",
"images/cover_stripes.gif",
"Bilder/oben.jpg");
var preImages = new Array();

edlb = yourImages.length;
adlb = ldlb/edlb;

function loadImage(ii){
i = ii;
n = parseInt(document.getElementById('balken1').style.left);
preImages[i] = new Image();
preImages[i].src = yourImages[i];
if(preImages[i].complete){
	i++;
	document.getElementById('balken').style.width = Math.round(i * adlb);
	document.getElementById('balken1').style.width = Math.round(i * adlb);
	document.getElementById('balken1').style.left = n-(Math.round(adlb)); 
	if(i < edlb){
		delay = setTimeout("loadImage(i)",10);
		}
	if(i == edlb){
		location.replace("index2.php");
		}
	}
	else{
	delay = setTimeout("loadImage(i)",10);
	}
}

index.php

Code: 
<html>
<head>
<title>main</title>
<script language="Javascript" src="preload.js"></script>
<style type="text/css">
<!--
a:hover {  color: #8AC5FF; text-decoration: none}
a:active {  text-decoration: none}
a:link {  text-decoration: none}
a:visited {  text-decoration: none}
-->
</style>

</head>

<body onload="loadImage(0)" style=" background: #535353; 	margin-left: 5; margin-bottom: 0; margin-right: 0; 	margin-top: 0;" text="#FFFFFF" marginwidth="0">
 
 </-- Ladebalken -->
<div id="balken" style=" z-index: 2; visibility: show; position: absolute; width: 0px; background-color: #ABE0FE; top: 145px; left: 245px; -moz-Opacity: 0.5; filter:alpha(opacity=0);">&nbsp;<br>&nbsp;</div>
<div id="balken1" style=" z-index: 2; visibility: show; position: absolute; width: 0px; background-color: #ABE0FE; top: 285px; left: 505px; -moz-Opacity: 0.5; filter:alpha(opacity=0);">&nbsp;<br>&nbsp;</div>


 
 <div style="z-index: 3; position: absolute;">
 <table valign="top" border="0" cellpadding="0" cellspacing="0" width="750" marginwidth="0">
    <tr>
      <td valign="top"><img src="Bilder/stripe.gif" alt="" width="740" height="75" border="0"></td>
    </tr>
    <tr>
    
	 <td><img src="images/spacer.gif" alt="" width="20" height="10" border="0"><img src="images/cover.gif" alt="" width="700" height="300" border="0"></td>
    </tr>
    <tr>
      <td><img src="Bilder/stripe.gif" alt="" width="740" height="80" border="0"></td>
     </tr>
  </table>
  </div>
  
  <div style="z-index: 1; position: absolute; top:145px; left:242px;">
	<img src="images/cover_stripes.gif" alt="" width="270" height="185" border="0">
  </div>  
  
 <div style="z-index: 2; position: absolute; top:380px; left:321px; width:150px;">
	<b><font face="Arial" size="1">&nbsp;REQUIRED MINIMUM<br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;800 x 600<br><br>
	last update: 25.02.2005</font></b>
  </div>  
</body>
</html>
 
Hi,

ich bin mir nicht sicher, aber ich denke, der IE kennt
Code: 
if(preImages[i].complete){
  // ...
}
nicht.

Verwende stattdessen mal
Code: 
if(preImages[i].width > 0){ 
  // ...
}
Ciao
Quaese
 
Hallo Quaese,

danke für deine schnelle Antwort. Habe image.complete im IE getestet. Das funktioniert auch. Er kennt also den Befehl. Hm ....

Gruß Micha
 
Hi,

hab es jetzt auch mal getestet.

Der IE gibt mir für complete immer false aus. Die Variante mit width dagegen funktioniert,
es wird zumindest der if-Zweig durchlaufen und die Bildobjekte als Objekte angezeigt.

Testdokument:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
a:hover {  color: #8AC5FF; text-decoration: none}
a:active {  text-decoration: none}
a:link {  text-decoration: none}
a:visited {  text-decoration: none}
-->
</style>
<script type="text/javascript">
<!--
var ldlb = 260;
var hdlb = 10;
var delay,adlb,edlb;
var yourImages = new Array(
"images/botton_rand.gif",
"images/haupt.jpg",
"images/links.jpg",
"images/logo.gif",
"images/menu_rand_1.gif",
"images/menu_rand_2.gif",
"images/menu_rand_3.gif",
"images/menu_rand_4.gif",
"images/menu_rand_5.gif",
"images/oben_links.jpg",
"images/oben_rechts.gif",
"images/oben_rechtss.gif",
"images/oben_rechts.jpg",
"images/oben_recshts.jpg",
"images/pf_re_h.gif",
"images/pf_re_n.gif",
"images/pfeil_hi_li.gif",
"images/pfeil_hi_re.gif",
"images/pfeil_nor_li.gif",
"images/pfeil_nor_re.gif",
"images/rechts.jpg",
"images/unten.jpg",
"images/cover_stripes.gif",
"Bilder/oben.jpg");

var preImages = new Array();

edlb = yourImages.length;
adlb = ldlb/edlb;

function loadImage(ii){
i = ii;
n = parseInt(document.getElementById('balken1').style.left);
preImages[i] = new Image();
preImages[i].src = yourImages[i];
if(preImages[i].width > 0){
	// Testausgabe
	document.getElementById('txtID').innerHTML += preImages[i] + " - " + preImages[i].complete + "<br>";
	i++;
	document.getElementById('balken').style.width = Math.round(i * adlb);
	document.getElementById('balken1').style.width = Math.round(i * adlb);
	document.getElementById('balken1').style.left = n-(Math.round(adlb));
	if(i < edlb){
		delay = setTimeout("loadImage(i)",10);
		}
	if(i == edlb){
		//location.replace("willkommen.html");
		}
	}
	else{
	delay = setTimeout("loadImage(i)",10);
	}
}
// -->
</script>
</head>
<body onload="loadImage(0);">

<div id="balken" style=" z-index: 2; visibility: visible; position: absolute; width: 0px; background-color: #ABE0FE; top: 145px; left: 245px; -moz-Opacity: 0.5; filter:alpha(opacity=0);">&nbsp;<br>&nbsp;</div>
<div id="balken1" style=" z-index: 2; visibility: visible; position: absolute; width: 0px; background-color: #ABE0FE; top: 285px; left: 505px; -moz-Opacity: 0.5; filter:alpha(opacity=0);">&nbsp;<br>&nbsp;</div>

<div id="txtID"></div>

</body>
</html>
Ciao
Quaese
 
Habs jetzt auch mit meiner Variante hin bekommen. Es waren mehrere Fehler im Quellcode.

1. Man sollte schon den Alpha - Wert der Ladebalken auf 50 oder so, aber nicht 0 wie ich, setzen. ;-)

2.
Code: 
preImages[i] = new Image();
    preImages[i].src = yourImages[i];
muss in eine extra Funktion, da ansonsten für das Bild bei jedem Test ein neues Object
angelegt wird.

3. onload="imageLoad" in der index.php ist auch Quatch, da die onload - Methode erst
aufgerufen wird, wenn die Seite geladen wurde.
Daraus folgt, dass ein Aufruf der Funktion imageLaod mit Hilfe von JS aus der HTML -
Seite heraus geschehen muss. Dieser Befehl muss unter den Tags der Ladebalken
stehen, da die Funktion imageLoad sonst nicht auf deren Atribute zugreifen kann.

Quellcode:

Code: 
...
function makeImage(i){
preImages[i] = new Image();
preImages[i].src = yourImages[i];
loadImage(i);
}

function loadImage(ii){
i = ii;
n = parseInt(document.getElementById('balken_down').style.left);
if(preImages[i].complete){
	i++;
	document.getElementById('balken_up').style.width = Math.round(i * adlb);
	document.getElementById('balken_down').style.width = Math.round(i * adlb);
	document.getElementById('balken_down').style.left = n-(Math.round(adlb)); 
	if(i < edlb){
		delay = setTimeout('makeImage(i)',10);
		}
	if(i == edlb){
		location.replace('index2.php');
		}
	}
	else{
	delay = setTimeout('loadImage(i)',10);
	}
}

Code: 
...
<body style=" background: #535353; 	margin-left: 5; margin-bottom: 0; margin-right: 0; 	margin-top: 0;" text="#FFFFFF" marginwidth="0">

 </-- Ladebalken -->
<div id="balken_up" style=" z-index: 2; visibility: show; position: absolute; width: 0px; background-color: #ABE0FE; top: 145px; left: 245px; -moz-Opacity: 0.5; filter:alpha(opacity=50);">&nbsp;<br>&nbsp;</div>
<div id="balken_down" style=" z-index: 2; visibility: show; position: absolute; width: 0px; background-color: #ABE0FE; top: 285px; left: 505px; -moz-Opacity: 0.5; filter:alpha(opacity=50);">&nbsp;<br>&nbsp;</div>

 <script language="Javascript">makeImage(0);</script>
...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück