0

このコードの何が問題になっていますか？

var images = [];

function getImages() {
    var st = true;
    var i = 1;
    var url;
    var ob;

    while(st) {
        if(i < 10) {
            url = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_00" + i + ".jpg";
            ob = new Image();
            ob.src = url;
            st = checkIfImageExists(ob);
            images.push(ob);
        }

        if(i >= 10 && i < 100) {
            url = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_0" + i + ".jpg";
            ob = new Image();
            ob.src = url;
            st = checkIfImageExists(ob);
            images.push(ob);
        }

        if(i >= 100) {
            url = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_" + i + ".jpg";
            ob = new Image();
            ob.src = url;
            st = checkIfImageExists(ob);
            images.push(ob);
        }
        i++;
    }
}

function checkIfImageExists(o) {
    var e = document.createElement("img");
    e.style.display = "none";
    document.getElementsByTagName("body")[0].appendChild(e);
    e.src = o.src;
    var res = e.width;
    document.getElementsByTagName("body")[0].removeChild(e);

    console.log(res);
    if(res === 0) {
        return false;
    } else {
        return true;
    }
}

getImages();

function outPut() {
    for(var i = 0; i < images.length; i++) {
        console.log(images[i]);
    }
}

outPut();

<ahref = "http://jsfiddle.net/rEA7k/7/" rel="nofollow">デモ

すべての配列要素を一度に出力しないのはなぜですか？同時に、実行ボタンを押すたびに、n+1個の配列要素が出力されます。どうして？

4

2 に答える 2

1

checkIfImageExists（）関数が原因です。あなたが達成しようとしていることは理解していますが、画像を読み込む時間を与えずに幅をチェックしています。イメージオブジェクトのonloadとonerrorにバインドする必要があります。（詳細については、 http：//lucassmith.name/2008/11/is-my-image-loaded.htmlを参照してください）。

これらの画像を本当に非同期でロードしたい場合、このwhileループは非常に危険です。推測するよりも、上限をすでに知っている方がよいでしょう。非同期が必要で最大値が不明な場合は、一度に限られた量の画像にチャンクしてロードする必要があります（また、ある種のsetIntervalを追加します。それ以外の場合、この設定では、サーバーが画像の場合、スクリプトはすでに数千の無効な画像を読み込もうとしているはずです。

コード例が必要な場合はお知らせください。ただし、少なくとも正しい方向を示しているはずです。

于 2012-06-17T19:13:44.390 に答える
1

これが私の書き直しです

画像が見つからなくなるとDEMOは停止します-この場合は106枚の画像です

var images =[];
var baseUrl = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_";    
function pad(num) {
   var str = "00"+num;
   return str.substring(str.length-3);
}

function output() {
    for (var i=0;i<images.length;i++) {
      console.log(images[i].src)
    }
}
function getImages(){
  var ob = new Image();
  var url = baseUrl+pad(images.length+1)+".jpg"  
  ob.onload=function() {
    images.push(ob);
    getImages();      
  }    
  ob.onerror=function() {
    output();
  }    
  ob.src= url;
}
getImages();
于 2012-06-17T21:29:31.273 に答える