3 
function LoadPage (page) {
// each page contains 10 pictures
    var endp = page*10;
// Empty the main container that contains the pictures
    $('#container').empty();
// Rewrite the Page Menu
    for (j=1;j<Math.abs(len/10);j++) {
        $('#container').append("<a href='javascript: LoadData("+j+")'>"+j+"</a>");
    }
// Add the image containers containing images
    for (i=endp-10;i<endp;i++) {
            $('#container').append("<div class='container' id="+i+" >");
    $('#'+i).append("<img src="+x[i].getElementsByTagName('URL')[0].childNodes[0].nodeValue+" width='200'>");
        $('#container').append("</div>");
    }
// Have to call a function ' wall.reload(); ' once all the pictures are loaded!
    setTimeout(function(){
    if (wall) { wall.reload(); }
            },2000);
}

この関数は、ページ番号を指定して複数回呼び出されます。すべてが正常に機能しています。setTimeout() 関数を使用して関数 wall.reload() を遅らせていますが、そうしたくありません。むしろ、すべての画像が読み込まれるまで関数を待機させてから、wall.reload() を起動する必要があります。

ありがとう。

4

2 に答える 2

1

イメージタグに onload 属性を追加できます。そこでは、imageCounter をインクリメントする imageLoaded() などの関数を呼び出します。imagecounter が追加した画像の量と一致する場合、wall.reload() が呼び出されます。コードは次のようになります。

var imagesLoaded = 0;
function imageLoaded(){
  imagesLoaded++
  if(imagesLoaded == numberOfImages)
    wall.reload();
  }
}

そして画像タグで：

<img src="asdf.jpg" onload="imageLoaded()">
于 2013-05-31T09:59:23.743 に答える
0 
function LoadPage (page) {
// each page contains 10 pictures
    var endp = page*10;
    // Empty the main container that contains the pictures
    $('#container').empty();
    // Rewrite the Page Menu
    for (j=1;j<Math.abs(len/10);j++) {
        $('#container').append("<a href='javascript: LoadData("+j+")'>"+j+"</a>");
    }

    // count of the loaded images
    var counterLoaded = 0;
    function waitReload(){
       counterLoaded++;
       // if all 10 images loaded
       if (counterLoaded == 10){
          if (wall){
             wall.reload();
          }
       }
    }

    // Add the image containers containing images
    for (i=endp-10;i<endp;i++) {
        $('#container').append("<div class='container' id="+i+" >");
        var img = document.createElement('img');
        img.src = x[i].getElementsByTagName('URL')[0].childNodes[0].nodeValue;
        img.setAttribute('width', '200');
        $('#'+i).append(img);
        $('#container').append("</div>");
        // if image loaded - increment loaded images counter
        img.onload = waitReload;
    }
 }
于 2013-05-31T10:02:42.617 に答える