Sometimes we just want to display the website if all the images are loaded.
Or do something when a few images are loaded and viewable in the browser.
This script makes it very easy for you!
This script even has an nice loader IF you want to use it.
You must have prototype if you want to use this script.
This is how it works:
type: use ‘fulldom’ string when u want to load ALL the images from the DOM, or use an array of objects
onFinish: the function you would like to call when loading is finished or just an alert()
loader: true/false whether to use a nice loader or not
loaderId:the ID of the element that will be used for the loader, so create an element in your html and give it an id attribute
LoaderText: the loader even has a text option to see how much images it loads and where is it now in the process.
%count is the current image that it tries to load
%total is the total amount of images that will be loaded
example code:
new ImageLoadedTrigger({type:'fulldom',onFinish:'finished()',loader:true,loaderId:'loader',loaderText:'Loading image %count from total of %total'});
you can use this .html page
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Here is the code for the loader:
/*
* ImageLoadedTrigger v0.1
*
* Tries to load all the images from the DOM
*
* made by Martijn van de Sande
* promadesign.nl / remorse.nl
*
* use it the way you like
* NO copyright text
* But please leave this header
* thanks
*
* example: new ImageLoadedTrigger({type:'fulldom',onFinish:'finished()',loader:true,loaderId:'loader',loaderText:'Loading image %count from total of %total'});
*
* goto remorse.nl for more info
*
*/
var ImageLoadedTrigger = Class.create({
//advanced config:
//make any changes you want in this div except for the id
loaderElement:'
',
//make any changes you want in this div except for the id
loaderTextElement: '
',
//end config
images:{},
useLoader:false,
loaderId:false,
finalize:'',
totalImages:0,
currentImage:0,
loadedFinished:false,
loaderText:'',
initialize: function(config){
if(typeof config.type == 'string' && config.type == 'fulldom'){
this.images = $$('img');
}else{
this.images = config.type;
}
//gets the total images that are being loaded
this.totalImages = this.images.length;
//use the loader or not?
this.useLoader = config.loader ? config.loader : false;
this.loaderId = config.loaderId ? config.loaderId : false;
//finalize function
this.finalize = config.onFinish;
this.loaderText = config.loaderText ? config.loaderText : '';
if(config.loader == true){
if(this.loaderId == false){
alert('please define a loader id');
return;
}else{
this.createLoader(config.loaderId);
}
}
this.loadImages();
},
createLoader:function(loaderid){
$(loaderid).innerHTML = this.loaderElement;
$(loaderid).innerHTML += this.loaderTextElement;
this.loaderStepWidth = $(loaderid).getWidth() / this.totalImages;
},
loadImages:function(){
for(i=0;i
//force not to do anything more...
//temp disabled
//if(this.loadedFinished != true){
this.onloadHandler();
//}
//var_dump(this);
}).bind(this);
//IE bug fix for force triggering the onload event when items are cached,
//but firefox does NOT like this! he loads everything double
if(Prototype.Browser.IE){
this.images[i].src = this.images[i].src;
}
}
},
onloadHandler:function(){
this.currentImage++;
if(this.useLoader){
var width = $('imageLoadedTriggerUsableLoader').getWidth() + this.loaderStepWidth;
$('imageLoadedTriggerUsableLoader').setStyle({width:width+'px'});
if(this.getLoaderText != null){
$('imageLoadedTriggerText').innerHTML = this.getLoaderText(this.currentImage);
}
}
if(this.currentImage == this.totalImages){
if (this.useLoader) {
$('imageLoadedTriggerUsableLoader').setStyle({width:'100%'});
$('imageLoadedTriggerText').innerHTML = 'All images loaded.';
}
this.onFinish();
}
},
onFinish:function(){
//not used anymore because of the IE only bug, i used if(Prototype.Browser.IE){
//this.loadedFinished = true;
eval(this.finalize);
},
getLoaderText:function(count){
var text = this.loaderText;
text = text.replace(/%count/,count);
text = text.replace(/%total/,this.totalImages);
return text;
}
});
Feel free to ask questions.
