✔ Preloader - Hintergrundbilder auf der Seite soll nicht mitgeladen werden...

T

tobm_knows_best

Erfahrenes Mitglied
Guten Morgen,

ich habe hier ein Script, welches mir sämtliche Bilder auf einer website recht schnieke lädt:

HTML: 
<script type="text/javascript">
		$(function () {
			$('picture_shadow_angebot').hide();//hide all the images on the page
		});
		
		var i = 0;//initialize
		var int=0;//Internet Explorer Fix
		$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
			var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
		});

		function doThis() {
			var imgs = $('img').length;//count the number of images on the page
			if (i >= imgs) {// Loop the images
				clearInterval(int);//When it reaches the last image the loop ends
			}
			$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
			i++;//add 1 to the count
		}
	</script>

Ich habe gelesen, dass ich diesem Bereich hier meine *Bilderklasse* verpassen soll, damit nur entsprechende Bilder geladen werden.
HTML: 
$('picture_shadow_angebot').hide();//hide all the images on the page
		});
Also jedes Bild mit der Klasse: "picture_shadow_angebot" sollte mit dem Preloader interagieren. Dummerweise habe ich aber auch ein Hintergrundbild, welches sich mit dem Fenster mitskaliert. Jedesmal wenn ich dann die Seite öffne wird das Hintergrundbild erst mal richtig hässlich gekachelt dargestellt - und danach wird das richtige "eingefadet" (obwohl ich diesem nicht diese Klasse verpasst habe...)

Weiss jemand woran das liegt?

Gruß
 
Ist Preloader gesucht... hier noch immer der Ausgangspunkt des verwendeten Preloaders, oder hast du zwischenzeitlich komplett umgesattelt?

Ein Link zum Problemfall ist hier grundsätzlich immer willkommen, um als Außenstehender ein Bild von der Situation gewinnen, und anhand des Live-Demos auch direkt den vollständigen Quellcode überfliegen zu können.
 
Zuletzt bearbeitet:
http://swat.pts-agency.eu/angebot.html hat gesagt.:
Javascript: 
$(window).bind("load", function( {//The load event will only fire if the entire page or document is fully loaded
Zum Vergrößern anklicken....
Das window-Objekt (= Browser-Anzeigefenster) bezieht das vollständige Dokument ein - und somit auch dessen Seitenhintergrund(bild).
 
Versuch's mal mit der Begrenzung auf #div_main, in dem sich die <img>-Tags befinden:
Javascript: 
$(#div_main).bind("load", function( {
 
Falls noch nicht bemerkt, von dem "Hintergrundbild" existiert neben der CSS-Regel background-image für <body> zudem auch ein <img>-Duplikat, das ohne seine spezielle CSS-Formatierung kein "Hintergrundbild" darstellen würde:

http://swat.pts-agency.eu/angebot.html hat gesagt.:
HTML: 
<body>
<img id="background-img" class="hintergrundbild" src="images/bg_site.jpg" alt="" />
CSS: 
img.hintergrundbild {
	min-height: 100%;        /*  Diese zwei Zeilen setzen die Regeln um den Hintergrund zu füllen  */
	min-width: 1024px;
	width: 100%;             /*  Die Regeln, welche für die Skalierung sorgen  */
	height: auto;
	position: fixed;         /*  Die Positionierung  */
	top: 0;
	left: 0;
	z-index: -1;
}
Zum Vergrößern anklicken....

... und der derzeitige Selektor in der Fade-Funktion doThis() bezieht nunmal alle enthaltenen <img>-Elemente der Seite ein - auch jene ohne die erwähnte "Bilder-Klasse" .picture_shadow_angebot.

Daraus folgt diese Script-Fassung:
Javascript: 
		$(function () {
			$('.picture_shadow_angebot').hide();//hide all the images on the page
		});
		
		var i = 0;//initialize
		var int=0;//Internet Explorer Fix
		$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
			var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
		});

		function doThis() {
			var imgs = $('.picture_shadow_angebot').length;//count the number of images on the page
			if (i >= imgs) {// Loop the images
				clearInterval(int);//When it reaches the last image the loop ends
			}
			$('.picture_shadow_angebot:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
			i++;//add 1 to the count
		}

Naja, und wie jQuery (Bibliothek + Scripts) im Dokumentheader korrekt eingebunden wird, habe ich dir in den letzten Themen wohl hinlänglich erläutert :rolleyes:
 
Zuletzt bearbeitet:
spicelab hat gesagt.:
Versuch's mal mit der Begrenzung auf #div_main, in dem sich die <img>-Tags befinden:
Javascript: 
$(#div_main).bind("load", function( {
Zum Vergrößern anklicken....

Also hier wird mir ein Syntax-Fehler angezeigt...

Deiner Aussage nach nehme ich an es ist also nicht machbar, es sei denn ich nehme das im Body-Tag definierte Hintergrundbild raus - richtig?

Bzgl. der Headerstruktur - Das ist mir auch schon aufgefallen, und ich bin dran ;) Wenn ich richtig liege, dann lädt er wohl nur folgende:

HTML: 
<script type="text/javascript" src="js/jquery.js"></script>

Merci nochmal :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück