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 属性添加到您的图像标签。在那里，您将调用诸如 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 回答