Ah, dat is een foutje van mijn kant. Dat krijg je als je scriptjes niet test
Dit is een verbeterde versie. De urls op regel 27 t/m 30 hebben van mij even een lokaal pad gekregen, maar dat kun je zelf wel weer verbeteren lijkt me?
Mijn testpagina:
http://robins.awardspace.com/helpmij/lauraahh/
Ik zal even de werking toelichten - ook leuk voor jou om te weten hoe je website werkt
De HTML begint dus met één plaatje, dat gelijk met de pagina geladen zal worden (in het bijzonder: als het document geladen is, is je plaatje dat ook).
- Bij een bezoek aan je website zal éérst de JavaScript uitgevoerd worden. Dat script doet in principe twee dingen:
wachten tot het document geladen is (r. 73) en
de rest van de plaatjes laden (r. 79, urls op r.27)
- Wanneer een plaatje geladen is (
onImgReady, r. 62), zal deze toegevoegd worden aan de array
images, de array waar we de geladen plaatjes in zetten. De teller (
imageReadyCount) wordt opgehoogd, en de check uitgevoerd (
checkReady).
-
checkReady controleert of zowel de pagina als de rest van de plaatjes geladen zijn. Is dat het geval, dan wordt de rest van de plaatjes toegevoegd aan de pagina, en een slider van het hele ding gemaakt
[JS]function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener) {
obj.addEventListener(type, callback, useCapture);
}
else if (obj.attachEvent) {
obj.attachEvent("on" + type, callback);
}
else {
console.warn("Failed to add " + type + "-event, ", obj);
}
}
function partial (f /*, args */) {
var args = Array.prototype.slice.call(arguments, 1);
return function partialFunction(/* arguments */) {
var i = 0, j = 0, _args = [];
while (i < args.length || j < arguments.length) {
_args.push(args
!== undefined ? args : arguments[j++]);
i++;
}
return f.apply(this, _args);
};
}
(function() {
var documentReady = false, imageReadyCount = 0, urls = [
"img/header_home_image2.jpg",
"img/header_home_image3.jpg",
"img/header_home_image4.jpg",
"img/header_home_image5.jpg"
], images = [];
function checkReady() {
if (documentReady && imageReadyCount == urls.length) {
var mySlides = document.getElementById("mySlides");
for (var i = 0; i < images.length; i++) {
var div = document.createElement("div");
div.id = "slide" + (i + 2);
div.className = "slide";
div.appendChild(images);
mySlides.appendChild(div);
}
$("#myController").jFlow({
controller: ".jFlowControl",
slideWrapper : "#jFlowSlider",
slides: "#mySlides",
selectedWrapper: "jFlowSelected",
effect: "flow",
width: "970px",
height: "250px",
duration: 400,
pause: 5000,
prev: ".jFlowNext",
next: ".jFlowPrev",
auto: true
});
}
}
function onImgReady(img) {
images.push(img);
imageReadyCount++;
checkReady();
}
function onImgError(img) {
console.warn("Image not loaded, ", img.src);
imageReadyCount++;
checkReady();
}
$(document).ready(function(){
documentReady = true;
checkReady();
});
//Image preloading
for (var i = 0; i < urls.length; i++) {
var img = new Image();
img.src = urls;
img.width = 970;
img.height = 250;
addEvent(img, "load", partial(onImgReady, img), false);
addEvent(img, "error", partial(onImgError, img), false);
}
})();[/JS]
