Pull to refresh

Ajax image прелоадер

Reading time 2 min
Views 1.9K
На днях на работе поставили задачу, нужно было сделать смену картинок. Задача решается в 5 минут при помощи jQuery. И как всегда есть одно «НО», картинки размером 1000x500 =)

И тут то оказалось что событие onLoad отрабатывает когда становятся извесны размеры изображения, а в случае больших картинок, нужно чтобы скрипт начинал работать только когда картинки подгружены полностью. И тут я подумал почему бы не использовать Ajax )


В общем вот что получилось:

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();
}
}


И все бы хорошо но тут нечто непонятное «изобразила» Opera старше 9.20 :-/
Если картинка(или любой другой файл больше ~98Кб) то вся эта конструкция отработат только ОДИН раз, тоесть вернувшиь на эту страницу вы просто ничего не увидите :(

Пример работы можете посмотреть например здесь

Мне интересно мнение общественности по поводу этого безобразия с Opera > 9.20 ( Кстати в операх младше все работает ) и конечно же мнение о скрипте :)

P.S. Подскажите как в коде поставить знаки «Больше» и «Меньше», а пока написал словами :)
P.P.S. Скрипт
Tags:
Hubs:
+6
Comments 16
Comments Comments 16

Articles