Ajaxイメージプリローダー

先日、職場で仕事を設定しました。写真を変更する必要がありました。 タスクはjQueryを使用して5分で解決されます。 そして、いつものように、「BUT」が1つあり、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;

},




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

}

}








そして、すべてがうまくいきますが、ここでは9.20より古い 「理解できない」描写されたOpera :-/

画像(または他のファイルが〜98Kbより大きい )の場合、この構造全体が一度だけ動作します。つまり、このページに戻っても、何も表示されません:(



ここで作業の例を見ることができます。



私はOperaのこの不名誉についての一般の意見に興味があります> 9.20(ちなみに、すべてが若い下のオペラで動作します)ともちろん、スクリプトに関する意見:)



PSコードに「もっと」と「より少ない」という記号を入れる方法を教えてください。しかし、今のところは言葉で書きました

PPS スクリプト



All Articles