jQuery 如何在调用另一个函数之前等待 div 加载？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16791479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wait for div to load before calling another function?
提问by van_folmert
<script>
var href;
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
href = this;
// cover all bookmarks
$("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black');
$("."+($(this).attr("class"))).css('background-color', '#F5F5F5');
// uncover chosen bookmark
$("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white');
$("#"+($(this).attr("id"))).css('background-color', 'white');
$("#tempMain").load($(this).attr("href")); // load content to temp div
setTimeout(function() {resizeDivs();}, 500); // synchronize size of #main and #rightColumn
});
});
function resizeDivs() {
var heightNew = $("#tempMain").css("height");
$("#rightColumn").css('height',heightNew);
$("#main").css('height',heightNew);
// $('#main').load($(href).attr('href'));
$("#main").html($("#tempMain").html()); // is faster than loading again
}
</script>
I'm loading subpages to a selected div of my main page by a jQuery function. In order to synchronise main div's and right column's height I'm using jQuery's .css()method. I wanted that resizing to look smoothly, so I've resolved it to following steps:
1. Load content of a subpage to an invisible temp div.
2. Calculate the height of that temp div.
3. Change the height of main div and right column to the height of that temp div.
4. Load content of a subpage to main div.
我正在通过 jQuery 函数将子页面加载到主页面的选定 div。为了同步主 div 和右列的高度，我使用了 jQuery 的.css()方法。我希望调整大小看起来很流畅，所以我已将其解决为以下步骤：
1. 将子页面的内容加载到不可见的临时 div。
2. 计算该临时 div 的高度。
3. 将主 div 和右列的高度更改为该临时 div 的高度。
4. 将子页面的内容加载到主 div。
However, I am aware that my current way of doing this is pretty lame because of using setTimeout()as an improvisation of waiting for content to load - I've tried using $(document).readybut with no luck. Using a global variable (var href) also doesn't seem lege artis, but passing thisoperator of $("a.load").clickfunction by apply()didn't work either.
但是，我知道我目前这样做的方式非常蹩脚，因为setTimeout()用作等待内容加载的即兴创作 - 我试过使用$(document).ready但没有运气。使用全局变量 ( var href) 似乎也不符合法律规定，但传递函数this运算符$("a.load").clickbyapply()也不起作用。
How to do it "the right" way?
如何以“正确”的方式做到这一点？
采纳答案by Mohammad Adil
Use load callback
使用加载回调
$("#tempMain").load($(this).attr("href"),function(){
resizeDivs();
// do other stuff load is completed
});
回答by Zeev G
with jquery
使用 jquery
function waitForElement(elementPath, callBack){
window.setTimeout(function(){
if($(elementPath).length){
callBack(elementPath, $(elementPath));
}else{
waitForElement(elementPath, callBack);
}
},500)
}
e.g. to use:
例如使用：
waitForElement("#myDiv",function(){
console.log("done");
});
here is without jquery
这里没有jquery
function waitForElement(elementId, callBack){
window.setTimeout(function(){
var element = document.getElementById(elementId);
if(element){
callBack(elementId, element);
}else{
waitForElement(elementId, callBack);
}
},500)
}
e.g. to use:
例如使用：
waitForElement("yourId",function(){
console.log("done");
});
回答by Samuel Caillerie
You can attach a callback in the jQuery loadfunction :
您可以在 jQueryload函数中附加回调：
$("#tempMain").load($(this).attr("href"), resizeDivs);
