加载多个动态图像

Onload Multiple Dynamic Images

本文关键字：图像 动态 加载      更新时间：2023-09-26
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()，但我不想这样做。相反，我希望函数等待，直到所有的图像加载，然后防火墙。reload()

谢谢。

你可以给你的图像标签添加一个onload属性。在这里，您将调用imageLoaded()之类的函数，该函数会增加imageCounter。如果imagecounter与您添加的图像数量匹配，它将调用wall.reload()。代码可能类似于以下内容:

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

在image标签中:

<img src="asdf.jpg" onload="imageLoaded()">

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;
    }
 }
相关文章：