Bilder vorladen?

bona · 22.01.2006, 19:37

Hallo zusammen,
habe eine frage,
kann man mit javascript bilder vorladen?

damit meine ich, sobald man auf die seite kommt, werden alle bilder auf dem Pc temporär gespeichert....

und wenn das laden dann lange geht, ein ladebalken anzeigenlassen...

kennt jemand ein tutorial über dieses "problemchen"??

mfg bona

Nightline · 23.01.2006, 00:12

Gib bei Google oder hier in der Suche einfach "Bilder vorladen" ein und du wirst massenhaft Lösungen vorfinden.

321 · 23.01.2006, 00:29

Das Vorladen ist einfach:

Im <head>-Bereich!

HTML-Code:

<script language="JavaScript">
<!--
if(document.images) {
Bild0 = new Image();
Bild0.src = "personal/Maskottchen_Walker.jpg";
Bild1 = new Image();
Bild1.src = "personal/maxmuster.jpg";
}
-->
</script>

Die Variablennamen Bild0 usw tun nichts zur Sache, Du kannst die Bilder normal ansprechen: <img src="personal/maxmuster.jpg" ....> usw.

Einen Fortrschrittsbalken machte ich noch nie, muss mal googeln

rewboss · 23.01.2006, 10:21

Bilder vorladen ist nur dann sinnvoll, wenn die Bilder nicht auf der Seite verwendet werden sollen, sondern erst auf der nächsten. Zum Beispiel, man könnte die Bilder vorladen auf einer Seite mit viel Text. Bis der User dann alles durchgelesen hat, sind dann alle Bilder heruntergeladen und wenn er auf die nächste Seite klickt, sind alle Bilder schon da. (Wenn er aber den Text nicht gelesen hat, muss er halt, wie normal, warten.)

Ohne JavaScript geht es übrigens auch:

<img src="irgendeinbild.jpg" width="1" height="1">

Das Bild ist dann praktisch unsichtbar. (Ich weiß nicht, ob es auch mit width="0" height="0" geht, aber probieren könntest du das.)

Ein Ladebalken ist möglich, aber in wie weit er sinnvoll ist weiß ich nicht. Man kann aber GIF- und JPEG-Bilder immer so speichern, dass sie relativ schnell angezeigt werden, zunächst unscharf dann immer schärfer. Bei GIF heißt es "interlacing" oder "verflechten" o.ä.; bei JPEG "progressiv". Zwar werden die Bilder nicht schneller heruntergeladen, aber es kommt einem fast so vor.

321 · 23.01.2006, 15:24

Zitat:

Zitat von rewboss

Bilder vorladen ist nur dann sinnvoll, wenn die Bilder nicht auf der Seite verwendet werden sollen, sondern erst auf der nächsten.

<img src="irgendeinbild.jpg" width="1" height="1">

Man wartet zwar, aber dafür wird die Seite dann gleich vollständig angezeigt.

1x1px-Bilder machte ich auch schon, sie können aber in einem 'delikaten' Design störend auffallen.

width="0" height="0" sei nicht cross-browser-sicher. (Las ich mal bei meyerweb)

Nightline · 23.01.2006, 18:55

Zitat:

Zitat von 321

1x1px-Bilder machte ich auch schon, sie können aber in einem 'delikaten' Design störend auffallen.

Ich lade deshalb Bilder immer in einer unsichtbaren Ebene vor.

Malleus · 23.01.2006, 19:52

Bzgl. Fortschrittsanzeige: Schau' Dir mal mein Beispiel an:

Code:

<html>
<head>
<title>Malleus' Javascript FAQ: Preload Images</title>
<meta name="keywords" content="Javascript, Bilder vorladen ">
<style type="text/css">

#statusBox {
	width:150px;
	height:20px;
	border:solid 1px black;
}

#statusBar {
background-color:yellow;
}

</style>

<script language="JavaScript" type="text/javascript">
var imgPath = "pics/",
imgNames = [ "Gretel01.jpg" , "Gretel02.jpg" , "Gretel03.jpg" , "Gretel04.jpg" ];

function getObj(objId)
{
return document.getElementById(objId);
};

function initPage()
{
	oStatusBox = getObj( "statusBox" );
	oStatusBar = getObj( "statusBar" );
	oStatusText = getObj( "statusText" );

	oTheImageLinks = getObj( "theImageLinks" );
	oTheImage = getObj( "theImage" );

	statusBoxWidth = parseInt( oStatusBox.clientWidth );

	imagesLoaded = 0;
	images2Preload = imgNames.length;

	for (var i = 0 ; i < imgNames.length ; i++ )
	{
	    var newImage = new Image();
	    newImage.onload = function () { imageIsLoaded( this ) };
	    newImage.src = imgPath + imgNames[i];

	    imageIsLoaded( newImage );
    };

};

function imageIsLoaded( newImage )
{
    if ( newImage.alreadyLoaded || newImage.width == 0)
	    	return true;

    newImage.alreadyLoaded = true;

    ++imagesLoaded;

    var alreadyLoaded = ( 100 * imagesLoaded / images2Preload );

    oStatusText.innerHTML = alreadyLoaded + " %";

    oStatusBar.style.width = ( statusBoxWidth * alreadyLoaded / 100 );

    if ( alreadyLoaded == 100 )
    {
   		// Alle Bilder wurden geladen
		oTheImageLinks.style.display="block";
	};

};

function showImage(evt)
{
	var srcElement = evt.srcElement || evt.targetElement;

	var imageNr = 1 * srcElement.id.substr(1);

	if ( !isNaN( imageNr ) )
	{
		oTheImage.src = imgPath + imgNames[ imageNr ];
		oTheImage.style.display = "block";
	}
	else
	{
		oTheImage.style.display = "none";
	};
};

</script>
</head>
<body onload="initPage()">

<div id="statusBox" style="position:relative">
<div id="statusBar" style="position:absolute;height:100%;overflow:hidden"></div>
<div id="statusText" style="position:absolute;width:100%;height:100%;text-align:center"></div>
</div>

<br>

<div id="theImageLinks" onmouseover="showImage(event)" style="display:none"><span id="I0">Bild 1</span>&nbsp;<span id="I1">Bild 2</span>&nbsp;<span id="I2">Bild 3</span>&nbsp;<span id="I3">Bild 4</span></div>
<img id="theImage" style="display:none" src=""/>

</body>
</html>

Wenn ich Bilder per HTML vorlade, mache ich es ähnlich wie Nightline:

Code:

<img src="aaa.jpg" style="position:absolute;top:-1000px;left:-1000px"/>

tschau

Malleus · 16.02.2006, 12:19

Hi, ich hätte mal eine Bitte: Könnt' Ihr mal mein PreloadScript-testen?

Ich hab' gehört und auch leider selbst festgestellt, daß der Balken nicht immer auf 100% geht.

Hier die "neue" Version:

PreloadImages.html (Final)

Bitte testen mit leerem und "vollem" Cache. Wenn's nicht geklappt hat, bitte auf den Button drücken und den Text posten. Danke!

Frank

Nightline · 19.02.2006, 23:21

Im IE6 bei allen drei Beispielen kein Problem.

bona · 20.02.2006, 17:14

mit dem ff den ich hab gehts auch :P weiss aber nicht genau welche version dies ist....

mit dem netscape 7.1 sieht man beim ersten nur die % und den balken nicht
beim 2. ist das % in der mitte des bildschirmes, der balken kommt nicht und das klick me geht auch nicht
beim 3. dasselbe, aber die bilder sind dort.

und mitm opera (weiss auchnicht welche version, denke aber schon die neuste :P) geht auch alles perfekt...

gruss bona

Malleus · 20.02.2006, 20:44

Danke für Eure Tests. Anscheinend hab' ich den Käfer erlegt. Ich hatte Probleme mit dem FF, der feuert manchmal das "Onload"-Event bei einem IMG-Element nicht.

Für alle die's interessiert: In der neuen Version hab' ich folgendes geändert:

Code:

var newImage = new Image();
newImage.onload = imageIsLoaded;
oPreloadBox.appendChild( newImage ); // Das ist der Bugfix !!!

newImage.src = imgPath + imgNames[i];
};


<div id="preloadBox" style="display:none"></div>

Wenn ich die Zeile mit dem "appendChild" weglasse, geht's "manchmal" mit FF schief. Ich füge das zu preloadende Bild in ein unsichtbares DIV-Element ein und es funktioniert. Wahrscheinlich ist's ein "FF"-Bug.

Tschau

Frank

Mortis · 30.08.2006, 20:32

Kurze b00N-Frage

: Wohin schreibt ihr diesen Code?

PHP-Code:


			
<img src="aaa.jpg" style="position:absolute; top:-1000px; left:-1000px" alt="" border="0"/>

Ich habe es einfach ins erste <div> geschrieben für alle vorzuladenden Bilder. Ist das ok?
Oder öfnnet ihr extra ein <a> dafür?
Oder ist das total egal und ich sollte meine Zeit lieber für was besseres als so lächerliche Fragen nutzen?

bona · 01.09.2006, 15:55

ich glaube das kommt nicht darauf an wo das es ist. Man sieht es ja eh nicht

Es sollte logischerweise einfach auf der Seite sein, die geladen wird

(aber habe es noch nicht selber gemacht, das da oben ist nur ne vermutung)

Mortis · 03.09.2006, 22:21

Ok, dachte ich mir schon. Danke.

Kann ich denn dieses Preload per <img src...> irgendwie in die css-Datei verbannen? Dann könnte ich diese Preload-Liste leichter verwalten!

bona · 05.09.2006, 07:52

den ganzen <img> tag geht nicht, oder ich wüsst nicht wie.
aber du könntest ihn verkleinern.
sprich dem img eine klasse (z.b. "preload") geben und dann so die style sachen in die CSS datei auslagern.

CSS:

Code:

img.preload {
 border : o;
 position:absolute;
 position-top:-1000px; 
 position-left:-1000px;
}

HTML:

Code:

<img class="preload" src="aaa.jpg" alt="" />