そして、イメージのサイズがわかったときに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 スクリプト