1

私はajaxスクリプトで動的に変更できるdivを持っています：

{
     var xmlHttp = GetXmlHttpObject();
     var url="/dashboard/ajax/images_pop_ajax.asp";
     if (!xmlHttp){
          alert ("Browser does not support HTTP Request")
          return
     }
     xmlHttp.onreadystatechange=function()
     {
          if (xmlHttp.readyState == 1)
          {
               document.getElementById("images_inner").innerHTML = LoadingAlert;
          }
          if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
          {
               var result = xmlHttp.responseText;
               document.getElementById('images_inner').innerHTML = result;
               window.onload = function(){AdjustColumns();}
          }
     };
     xmlHttp.open("GET", url , true)
     xmlHttp.send(null)
}

function GetXmlHttpObject()
{
     var objXMLHttp=null;
     if (window.XMLHttpRequest)
     {
          objXMLHttp=new XMLHttpRequest();
     }
     else if (window.ActiveXObject)
     {
          objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     return objXMLHttp;
}

images_pop_ajax.aspファイルを実行すると、8つの画像が返され、それらはdivタブIDimages_innerに配置されます。これが完了したら、すべてが整列するようにページの列を調整したいと思います。だから私はこのスクリプトを実行します：

function AdjustColumns()
{
     var ImgCol = document.getElementById('images_inner').offsetHeight;
     var ClassCol = 820;
     if (ImgCol > 574)
     {
          var ToAdd = eval(ImgCol - 574);
          document.getElementById('class_inner').style.height = eval(ClassCol + ToAdd) + 'px';
     }
}

私が抱えている問題は、すべての画像が読み込まれる前にAdjustColumns（）スクリプトが実行されるため、列が整列しないことです。画像が読み込まれた後、どうすれば実行できますか？

よろしくお願いします。

ネオジャキー

4

1 に答える 1

1

画像ごとに、このイベントを追加し、すべてが読み込まれるのを待つ必要があります（カウンターを使用）

   var counter = 0;
   var image = new Image();
    //attachEvent("onload") for ie
    image.addEventListener("load", function() {
                                   counter++;
    if(counter == 8) adjustColumns();
    }, false);
    image.src = "image.jpg";

画像がすでにキャッシュにある場合など、うまく機能しない場合もありますが、注意してください。

于 2012-11-19T20:09:47.673 に答える