火的javascript裝入

我具有可與一個Ajax腳本dynaimcally改變一個div：火的javascript裝入

{ 
    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選項卡id images_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（）腳本運行所有的圖像加載所以結果之前，列不排隊。如何在圖像加載完成後運行它？

提前許多感謝，

neojakey

來源

2012-11-19 neojakey

將onload事件處理程序放在圖像上，並在所有火災發生後調用'AdjustColumns'。 – Musa

images_pop_ajax.asp是否會返回實際圖像，或只是指向圖像（img標籤）？另外，你是否檢查AdjustColumns實際運行？ – Christophe

爲每個圖像，你應該添加此事件，並等待他們時，他們都被加載（使用一個計數器）

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-19 20:09:47

火的javascript裝入

回答

相關問題