preloadCssImages-Plugin Problem (mit Tescase)

zoomify · #1 (**permalink**) 07.01.2012, 17:49

Hallo zusammen,

tum Vorladen meiner Hintergrundbilder würde ich gerne das jquery-Plugin preloadCssImages benutzen.
Ich habe ein extra großes 2MB-Hintergrundbild erstellt, um das ganze zu testen, doch funktioniert das Plugin bei mir leider nicht:

Wenn ich ganz oft F5 drücke oder meinen Cache leere, dann sieht man die rote Schrift schon bevor das Hintergrundbild geladen wurd. Das dürfte doch nicht sein... Mit dem Plugin muss doch zuerst der Hintergrund und erst dann das rote p-Element geladen werden, oder?

Anbei der Link zum Testcase

Und hier ist der Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<meta name="description" content="" />
    
<style type="text/css">
	
body {
	font-size: 100.01%;
	font-family: Arial, Helvetica, Geneva, sans-serif;
	background-image: url(img/bgeffect.jpg);
	background-position: top center;
}

p {
	color: #f00;
	font-size: 200px;	
}
	
</style>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="js/preloadCssImages.jQuery_v5.js" type="text/javascript"></script> 

	<script type="text/javascript">
		$(document).ready(function(){
			$.preloadCssImages(); 
		});
	</script>

</head>

<body>
<p>Test</p>
	<script type="text/javascript">
		$(document).ready(function(){
			$.preloadCssImages(); 
		});
	</script>

</body>
</html>

Was habe ich falsch gemacht?

Ich würde mich riesig über Eure Hilfe freuen.

Vielen Dank
Zoomify

zoomify · #2 (**permalink**) 09.01.2012, 10:14

Hi nochmal... kann mir hier echt niemand helfen?

Scheppertreiber · #3 (**permalink**) 09.01.2012, 11:09

Code:

$(document).ready(function(){
	$.preloadCssImages(); 
});

preload wird ausdrücklich erst aufgerufen wenn das Zeugs komplett geladen ist

mantiz · #4 (**permalink**) 09.01.2012, 11:14

Moin, dass das so nicht funktionieren kann, sollte doch eigentlich klar sein, oder?

Du rufst die Funktion bei "$(document).ready" auf, also, wenn das HTML-Dokument vollständig geladen ist, also auch das p-Element, jetzt steht das CSS mit im Markup, also kann es auch rot und gross, etc. sein.

Was du bräuchtest wäre ein verzögern der Anzeige, bis die Preload-Funktion fertig ist. dazu könntest du zu Beginn alles ausblenden (z.b. body { display: none; }), aber bitte per JS setzen. Dann auf "$(document).ready" zuerst preloadCssImages aufrufen, dann body einblenden, also ungefähr so:

Code:

$(document).ready(function(){
    var body = document.getElementsByTagName('body')[0];
    body.style.display = 'none';
    preloadCssImages();
    body.style.display = '';
});

Bin mir bei dem Code nicht sicher, aber so von der Idee her sollte es klar sein.

David · #5 (**permalink**) 09.01.2012, 11:26

Seltsame Herangehensweise. Wenn du deine Bilder klein hälst, oder via Data-URI gleich ins Stylesheet schreibst, das Stylesheet komprimierst und das Markup ordentlich aufbaust, dann sollte der Hintergrund da sein, bevor jQuery geladen ist.

zoomify · #6 (**permalink**) 09.01.2012, 12:14

Hi Leute,
danke für eure Antworten!

Mich hat das aber echt umgehauen.
Dieser preloader wird sowas von gehyped im Internet. Unzählige Blogs mit hunderten positiven Kommentaren machen Werbung dafür. Das soll mittlerweile ja auch eine überarbeitete Version sein...

Also momentan verstehe ich nur Bahnhof, wobei mich auch schon immer gewundert hat, dass das erst nach dem Laden des Dokuments ausgeführt wird.

Aber die ganzen Leute können doch nicht irren, oder?

mantiz · #7 (**permalink**) 09.01.2012, 12:27

Es kommt drauf an zu welchem Zweck du einen Preload haben möchtest. Der Preloader ist imo dazu gedacht, z.B. die Bilder vorzuladen, die z.B. bei einem hover ausgetauscht werden. Ich bin mir jetzt nicht ganz sicher, aber afaik werden Bilder, die aufgrund der aktuell gesetzten Styles nicht angezeigt werden auch nicht geladen. Dadurch kann es vorkommen, dass ein Bild bei einem hover nicht sofort zur Verfügung steht.

Imo ist das aber recht sinnfrei bzw. nur in seltenen Fällen wirklich zu gebrauchen. Die meisten Probleme dieser Art dürften sich durch CSS-Sprites viel eleganter lösen lassen.

fricca · #8 (**permalink**) 09.01.2012, 12:27

Bist du denn sicher, dass dieser Preloader überhaupt das tun soll, was du von ihm erwartest?
Ich habe nur kurz gegoogelt und lese nur, dass der Preloader nicht direkt benötigte Bilder aus dem Stylesheet lädt, damit sie später ohne Verzögerung eingesetzt werden können, z.B. bei einem Hover-Effekt oder nachträglich ins DOM geschriebenen Elementen.
Dass der gesamte Ladevorgang einer Seite unterbrochen wird, um erst Bilder zu laden -- das lese ich nirgends. Und es wäre doch auch nicht sinnvoll, den Besucher erst minutenlang vor einer leeren Seite warten zu lassen. Oder wie stellst du dir das vor?
Für dein direkt für body angegebenes Bild brauchst du keinen Preloader. Das wird ohnehin bei Aufruf der Seite vom Browser geladen.

edit: Etwas spät ...

Zitat:

Zitat von mantiz

Imo ist das aber recht sinnfrei bzw. nur in seltenen Fällen wirklich zu gebrauchen. Die meisten Probleme dieser Art dürften sich durch CSS-Sprites viel eleganter lösen lassen.

Sehe ich ähnlich. Ich denke, sinnvolle Fälle wären solche, in denen die Bilder nur bei Scriptmanipulation des DOMs benötigt werden. Wer kein Script aktiviert hat braucht die Bilder dann auch nicht laden.

David · #9 (**permalink**) 09.01.2012, 12:35

Zitat:

Zitat von zoomify

Aber die ganzen Leute können doch nicht irren, oder?

Na ja, Milionen gucken auch DSDS, das macht Dieter Bohlen jetzt noch nicht zum nützlichen Mitglied unserer Gesellschaft.

Wie Mantiz sagt, hängt es vom Anwendungsfall ab. Der normale Website lässt sich aber mit anderen Mitteln wesentlich besser Beine machen, als ein JS Framework dazu einzusetzen, es so aussehen zu lassen, dass es schneller ist.
Stichworte: CSS-Sprites, Data-URI oder PNG-Kompression. Und dann wäre da noch das weite Feld des Canvas-Elements.

Thielo · #10 (**permalink**) 09.01.2012, 12:51

Zitat:

Zitat von David

Na ja, Milionen gucken auch DSDS, das macht Dieter Bohlen jetzt noch nicht zum nützlichen Mitglied unserer Gesellschaft.

*ymmd*

)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Font der Überschrift ändern (Problem)	artist	CSS	2	07.12.2007 10:01
Design zu CSS/HTML verarbeiten - Problem häufen sich.	Grafikamateur	CSS	2	06.08.2007 09:57
Problem mit WordPress und dem Bilder Upload	Maxefix	Serveradministration und serverseitige Scripte	0	19.12.2006 14:58
Problem bei Div's - zwei mal das gleiche und doch nicht ...	Niriel	CSS	10	09.06.2005 17:39
Problem mit einem CSS Layout	nARC	CSS	20	21.05.2005 06:28