Ajax image preloader

The other day at work they set the task, it was necessary to make a change of pictures. The problem is solved in 5 minutes using jQuery. And as always there is one “BUT”, pictures of 1000x500 size =)



And then it turned out that the onLoad event fulfills when the image sizes become known, and in the case of large images, it is necessary that the script starts working only when the images are fully loaded. And then I thought why not use Ajax)





In general, this is what happened:

')

ajaxImagePreloader = {

collectionImage : undefined,

loadCounter : -1,

http_request : undefined,

callBackFunction : undefined,

http_request : undefined,

createRequestObject : function(){

if (window.XMLHttpRequest) {

try {

return new XMLHttpRequest();

} catch (e){}

} else if (window.ActiveXObject) {

try {

return new ActiveXObject('Msxml2.XMLHTTP');

} catch (e){}

try {

return new ActiveXObject('Microsoft.XMLHTTP');

} catch (e){}

}

return null;

}, ajaxImagePreloader = {

collectionImage : undefined,

loadCounter : -1,

http_request : undefined,

callBackFunction : undefined,

http_request : undefined,

createRequestObject : function(){

if (window.XMLHttpRequest) {

try {

return new XMLHttpRequest();

} catch (e){}

} else if (window.ActiveXObject) {

try {

return new ActiveXObject('Msxml2.XMLHTTP');

} catch (e){}

try {

return new ActiveXObject('Microsoft.XMLHTTP');

} catch (e){}

}

return null;

}, makeRequest : function(url){

ajaxImagePreloader.http_request = ajaxImagePreloader.createRequestObject();

if (!ajaxImagePreloader.http_request) {

alert(' XMLHTTP ');

return false;

}

ajaxImagePreloader.http_request.onreadystatechange = ajaxImagePreloader.preloadImage;

ajaxImagePreloader.http_request.open('GET', url, true);

ajaxImagePreloader.http_request.send(null);

},

preloadImage : function(){

if(ajaxImagePreloader.loadCounter == -1){

ajaxImagePreloader.loadCounter++;

if ( ajaxImagePreloader.loadCounter ajaxImagePreloader.collectionImage.length ){

ajaxImagePreloader.makeRequest(ajaxImagePreloader.collectionImage[ajaxImagePreloader.loadCounter]);

}

}else{

if (ajaxImagePreloader.http_request.readyState == 4) {

ajaxImagePreloader.loadCounter++;

if ( ajaxImagePreloader.loadCounter ajaxImagePreloader.collectionImage.length ){

ajaxImagePreloader.makeRequest(ajaxImagePreloader.collectionImage[ajaxImagePreloader.loadCounter]);

}else{

ajaxImagePreloader.callBackFunction();

return true;

}

}

}

return null;

},

init : function(collectionImage, callBackFunction){

if (!collectionImage){

alert(' !');

return false;

}else{

ajaxImagePreloader.collectionImage = collectionImage;

}

if (!callBackFunction){

alert(' !');

return false;

}else{

ajaxImagePreloader.callBackFunction = callBackFunction;

}

ajaxImagePreloader.preloadImage();

}

} makeRequest : function(url){

ajaxImagePreloader.http_request = ajaxImagePreloader.createRequestObject();

if (!ajaxImagePreloader.http_request) {

alert(' XMLHTTP ');

return false;

}

ajaxImagePreloader.http_request.onreadystatechange = ajaxImagePreloader.preloadImage;

ajaxImagePreloader.http_request.open('GET', url, true);

ajaxImagePreloader.http_request.send(null);

},

preloadImage : function(){

if(ajaxImagePreloader.loadCounter == -1){

ajaxImagePreloader.loadCounter++;

if ( ajaxImagePreloader.loadCounter ajaxImagePreloader.collectionImage.length ){

ajaxImagePreloader.makeRequest(ajaxImagePreloader.collectionImage[ajaxImagePreloader.loadCounter]);

}

}else{

if (ajaxImagePreloader.http_request.readyState == 4) {

ajaxImagePreloader.loadCounter++;

if ( ajaxImagePreloader.loadCounter ajaxImagePreloader.collectionImage.length ){

ajaxImagePreloader.makeRequest(ajaxImagePreloader.collectionImage[ajaxImagePreloader.loadCounter]);

}else{

ajaxImagePreloader.callBackFunction();

return true;

}

}

}

return null;

},

init : function(collectionImage, callBackFunction){

if (!collectionImage){

alert(' !');

return false;

}else{

ajaxImagePreloader.collectionImage = collectionImage;

}

if (!callBackFunction){

alert(' !');

return false;

}else{

ajaxImagePreloader.callBackFunction = callBackFunction;

}

ajaxImagePreloader.preloadImage();

}

}



And everything would be fine, but here something incomprehensible "portrayed" Opera over 9.20 : - /

If the picture (or any other file is larger than ~ 98Kb ), then this whole construction will work only ONCE, that is, you will not see anything back on this page :(



Example of work can see for example here.



I am interested in the public opinion about this disgrace with Opera> 9.20 (By the way, everything works in operas younger) and of course the opinion about the script :)



PS Tell me how to put the signs "More" and "Less" in the code, but for now I wrote with words :)

PPS Script