Preload een pagina

  • Onderwerp starter Onderwerp starter ROL
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
R

ROL

Gebruiker
Lid geworden
28 sep 2008
Berichten
76
Hallo,

Ik zoek een script waarmee ik een css file en meerdere afbeelding kan laden in het cache, het liefst eentje met een statusbar. Iemand een tip waar zoiets kan vinden/kopen?

Thanx
 
Alle pagina's laden automatisch naar de cache... zodra je een pagina klikt gaat ie in de cache en de keer daarop komt ie uit de cache.

Wat wil je precies bereiken? Dan kunnen we je beter helpen.
 
Ik wil dat een pagina (intro) met de titel alle images (jpg, png en swf) en de css laat naar de cache (de afbeeldingen worden nog niet per se op deze pagina weergegeven), en wanneer alles geladen is dat wordt de volgende pagina (index) geladen.

In de .htacces geef ik aan dat intro geladen moet worden ipv index. En de index wordt met een fade effect geopend na intro.

Waarom? De site heeft een bewegende achtergrond (swf en gif als backup), de site is tot en met full hd opgemaakt (voorwaardelijke opmaak afhankelijk van schermresoltie). Afbeeldingen worden daar wat groot van en de site laat ongelijk. Ik wil dus dat eerst alles geladen wordt zodat de site snel en zonder rare zichtbare load sequences wordt getoond.
 
waarom

waarom maak je hem dan niet helemaal in flash dan is het veel simpeler om een preload te maken!
 
waarom maak je hem dan niet helemaal in flash dan is het veel simpeler om een preload te maken!
Klik om te vergroten...
Omdat flash-sites echt een Slecht Idee zijn.

Wat je kan doen, om je CSS te laden: gewoon als <link> in je header zetten
afbeeldingen wordt wat Javascript-magie, je maakt een mooie loop om de images te preloaden, en geeft ze een 'load' event welke naar een teller wijst. Als de teller vol is, zijn alle plaatjes geladen.
 
Dat vraag ik mij af... Met mootools incom. met html5 komt je een heel eind, en dat is (wat mij betreft) een stuk makkelijker sef in te richten.
 
ROL zei:
Ben nu met MooTools aan het klooien. Heb hier iets gevonden waarmee ik mijn probleem ook al aardig zou moeten oplossen. Heb het nog niet helemaal aan de praat. Laat het nog wel even horen.

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
Klik om te vergroten...

Dat heb ik opgegeven. De site draait onder Joomla 1.5.20. Zit aardig wat Javascript in functies die ik erin heb 'gehangen' , Joomla heeft in de core ook mootools (die ik gebruik) en dat geeft problemen met dit script.

Het is overigens wel heel erg makkelijk te gebruiken, het ziet er wel aardig uit (beetje flash achtig ;-) )



Ik ga maar verder googlen (ik leer echt een hoop vandaag). Misschien ook maar wat meer verdiepen in compressie van images...
 
Laatst bewerkt:
[offtopic]
pepernoot zei:
dude, let op mijn woorden over een paar jaar maakt iederéén zijn site met flash!
Klik om te vergroten...

'dude',

ik kan je met zekeheid zeggen, nee, dat is niet waar. Flash-websites zijn gewoon een slecht idee. Geef me één reden waarom iemand (normaal persoon) een site in Flash zou maken, terwijl je dit ook met HTML zou kunnen, zonder dat dit een erg groot nadeel heeft.

[/offtopic]
 
Laatst bewerkt:
Ik heb het idee aangepast. Ik gebruik toch het eerder genoemde script. Ik heb de site in een map gezet (domein.nl/cms).

In de root heb ik een eenvoudige html gemaakt, met de mootools preloader. Alle afbeeldingen worden onder elkaar geladen in de body. Daaroverheen heb ik een div (100%*100%), bg zwart, z-index 5, pos absolute. De afbeeldingen krijg je dus niet te zien. Nu wil ik alleen dat het script na het preloaden de bezoeker doorstuurt naar domein.nl/cms. Hoe doe ik dat?

Hier is het js bestandje
Code: 
var QueryLoader = {
	/*
	 * QueryLoader		Preload your site before displaying it!
	 * Author:			Gaya Kessler
	 * Date:			23-09-09
	 * URL:				http://www.gayadesign.com
	 * Version:			1.0
	 * 
	 * A simple jQuery powered preloader to load every image on the page and in the CSS
	 * before displaying the page to the user.
	 */
	
	overlay: "",
	loadBar: "",
	preloader: "",
	items: new Array(),
	doneStatus: 0,
	doneNow: 0,
	selectorPreload: "body",
	ieLoadFixTime: 2000,
	ieTimeout: "",
		
	init: function() {
		if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
			//break if IE6			
			return false;
		}
		if (QueryLoader.selectorPreload == "body") {
			QueryLoader.spawnLoader();
			QueryLoader.getImages(QueryLoader.selectorPreload);
			QueryLoader.createPreloading();
		} else {
			$(document).ready(function() {
				QueryLoader.spawnLoader();
				QueryLoader.getImages(QueryLoader.selectorPreload);
				QueryLoader.createPreloading();
			});
		}
		
		//help IE drown if it is trying to die :)
		QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
	},
	
	ieLoadFix: function() {
		var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
		if (ie[0].match("MSIE")) {
			while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
				QueryLoader.imgCallback();
			}
		}
	},
	
	imgCallback: function() {
		QueryLoader.doneNow ++;
		QueryLoader.animateLoader();
	},
	
	getImages: function(selector) {
		var everything = $(selector).find("*:not(script)").each(function() {
			var url = "";
			
			if ($(this).css("background-image") != "none") {
				var url = $(this).css("background-image");
			} else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") {
				var url = $(this).attr("src");
			}
			
			url = url.replace("url(\"", "");
			url = url.replace("url(", "");
			url = url.replace("\")", "");
			url = url.replace(")", "");
			
			if (url.length > 0) {
				QueryLoader.items.push(url);
			}
		});
	},
	
	createPreloading: function() {
		QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
		$(QueryLoader.preloader).css({
			height: 	"0px",
			width:		"0px",
			overflow:	"hidden"
		});
		
		var length = QueryLoader.items.length; 
		QueryLoader.doneStatus = length;
		
		for (var i = 0; i < length; i++) {
			var imgLoad = $("<img></img>");
			$(imgLoad).attr("src", QueryLoader.items[i]);
			$(imgLoad).unbind("load");
			$(imgLoad).bind("load", function() {
				QueryLoader.imgCallback();
			});
			$(imgLoad).appendTo($(QueryLoader.preloader));
		}
	},

	spawnLoader: function() {
		if (QueryLoader.selectorPreload == "body") {
			var height = $(window).height();
			var width = $(window).width();
			var position = "fixed";
		} else {
			var height = $(QueryLoader.selectorPreload).outerHeight();
			var width = $(QueryLoader.selectorPreload).outerWidth();
			var position = "absolute";
		}
		var left = $(QueryLoader.selectorPreload).offset()['left'];
		var top = $(QueryLoader.selectorPreload).offset()['top'];
		
		QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
		$(QueryLoader.overlay).addClass("QOverlay");
		$(QueryLoader.overlay).css({
			position: position,
			top: top,
			left: left,
			width: width + "px",
			height: height + "px"
		});
		
		QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
		$(QueryLoader.loadBar).addClass("QLoader");
		
		$(QueryLoader.loadBar).css({
			position: "relative",
			top: "50%",
			width: "0%"
		});
	},
	
	animateLoader: function() {
		var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
		if (perc > 99) {
			$(QueryLoader.loadBar).stop().animate({
				width: perc + "%"
			}, 500, "linear", function() { 
				QueryLoader.doneLoad();
			});
		} else {
			$(QueryLoader.loadBar).stop().animate({
				width: perc + "%"
			}, 500, "linear", function() { });
		}
	},
	
	doneLoad: function() {
		//prevent IE from calling the fix
		clearTimeout(QueryLoader.ieTimeout);
		
		//determine the height of the preloader for the effect
		if (QueryLoader.selectorPreload == "body") {
			var height = $(window).height();
		} else {
			var height = $(QueryLoader.selectorPreload).outerHeight();
		}
		
		//The end animation, adjust to your likings
		$(QueryLoader.loadBar).animate({
			height: height + "px",
			top: 0
		}, 500, "linear", function() {
			$(QueryLoader.overlay).fadeOut(800);
			$(QueryLoader.preloader).remove();
		});
	}
}

de index
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>De site wordt geladen...</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>
</head>

<body>

<div style="position:absolute; background-color:#000; width:100%; height:100%; margin:0 0 0 0; z-index:5; overflow-x:hidden;">

</div>
<div style="position:absolute; width:100%; height:100%; overflow:hidden;">
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img1.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img2.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img3.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img4.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img5.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img6.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/logo.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/img7.png" />
<img src="http://www.sprookjesconcert.nl/cms/templates/vhe/images/bg.png" />
</div>
<script type='text/javascript'>
	QueryLoader.init();
</script>
</body>
</html>

Kan het (nog) niet live laten zien, ik ontwikkel met WAMP.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan