[英]How do I fire javascript after DOM and CSS are loaded but not images?
[英]Fire javascript after images have loaded
我有一個可以用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選項卡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
對於每個圖像,您應該添加此事件,並在它們全部加載后等待它們(使用計數器)
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";
請注意,盡管有時它無法正常工作,例如,當圖像已經在緩存中時。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.