18 
<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>

我正在通过 jQuery 函数将子页面加载到我的主页的选定 div 中。为了同步主 div 和右列的高度，我使用了 jQuery 的.css()方法。我希望调整大小看起来平滑，所以我将其解决为以下步骤：
1. 将子页面的内容加载到不可见的临时 div。
2. 计算那个 temp div 的高度。
3.将主div和右列的高度更改为该临时div的高度。
4.将子页面的内容加载到主div。

但是，我知道我目前这样做的方式非常蹩脚，因为我使用setTimeout()的是等待内容加载的即兴创作——我尝试过使用$(document).ready但没有运气。使用全局变量 ( var href) 似乎也不合法，但传递函数this运算符$("a.load").clickbyapply()也不起作用。

如何以“正确”的方式做到这一点？

4

4 回答 4

33

用jQuery

function waitForElement(elementPath, callBack){
  window.setTimeout(function(){
    if($(elementPath).length){
      callBack(elementPath, $(elementPath));
    }else{
      waitForElement(elementPath, callBack);
    }
  },500)
}

例如使用：

waitForElement("#myDiv",function(){
    console.log("done");
});

这里没有jquery

function waitForElement(elementId, callBack){
  window.setTimeout(function(){
    var element = document.getElementById(elementId);
    if(element){
      callBack(elementId, element);
    }else{
      waitForElement(elementId, callBack);
    }
  },500)
}

例如使用：

waitForElement("yourId",function(){
    console.log("done");
});
于 2015-08-10T07:33:38.247 回答
5

使用加载回调

$("#tempMain").load($(this).attr("href"),function(){
   resizeDivs();
   // do other stuff load is completed
});
于 2013-05-28T12:01:32.540 回答
2

您可以在 jQueryload函数中附加回调：

$("#tempMain").load($(this).attr("href"), resizeDivs);

见：http ://api.jquery.com/load/

于 2013-05-28T12:01:43.087 回答
0

我用来检查是否加载了（动态）DIV 的简单脚本：

var tid = setInterval(timer, 100);

function timer() {

     var elementExist = $('#DIV');

     if (elementExist.length == 1) {

           functionToLoad();
     }
}

function functionToLoad(){

  clearInterval(tid);

  // REST OF CODE

}
于 2021-05-08T10:00:30.283 回答