如何在调用另一个函数之前等待div加载?

时间:2013-05-28 11:58:14

标签: javascript jquery

<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.计算临时div的高度 3.将主div和右列的高度更改为该临时div的高度 4.将子页面的内容加载到主div。

但是,我知道我目前这样做的方式相当蹩脚,因为使用setTimeout()作为等待内容加载的即兴创作 - 我尝试使用$(document).ready但没有运气。使用全局变量(var href)似乎也不是艺术,但通过this $("a.load").click函数的apply()运算符也不起作用。

如何做到“正确”的方式?

4 个答案:

答案 0 :(得分:20)

使用jquery

java.lang.VerifyError: Cannot inherit from final class
            at java.lang.ClassLoader.defineClass1(Native Method)
            at java.lang.ClassLoader.defineClass(ClassLoader.java:800)
            at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142)
            at weblogic.utils.classloaders.GenericClassLoader.defineClass(GenericClassLoader.java:385)
            at weblogic.utils.classloaders.GenericClassLoader.findLocalClass(GenericClassLoader.java:344)
            at weblogic.utils.classloaders.GenericClassLoader.findClass(GenericClassLoader.java:302)
            at weblogic.utils.classloaders.ChangeAwareClassLoader.findClass(ChangeAwareClassLoader.java:64)
            at java.lang.ClassLoader.loadClass(ClassLoader.java:425)
            at java.lang.ClassLoader.loadClass(ClassLoader.java:358)
            at weblogic.utils.classloaders.GenericClassLoader.loadClass(GenericClassLoader.java:180)
            at weblogic.utils.classloaders.ChangeAwareClassLoader.loadClass(ChangeAwareClassLoader.java:43)
            at java.lang.Class.forName0(Native Method)
            at java.lang.Class.forName(Class.java:270)
            at com.google.gwt.user.server.rpc.SerializationPolicyLoader.loadFromStream(SerializationPolicyLoader.java:196)
            at com.google.gwt.user.server.rpc.RemoteServiceServlet.loadSerializationPolicy(RemoteServiceServlet.java:93)
            at com.google.gwt.user.server.rpc.RemoteServiceServlet.doGetSerializationPolicy(RemoteServiceServlet.java:352)
            at com.google.gwt.user.server.rpc.RemoteServiceServlet.getSerializationPolicy(RemoteServiceServlet.java:206)
            at com.google.gwt.user.server.rpc.impl.ServerSerializationStreamReader.prepareToRead(ServerSerializationStreamReader.java:505)
            at com.google.gwt.user.server.rpc.RPC.decodeRequest(RPC.java:240)
            at com.google.gwt.user.server.rpc.RemoteServiceServlet.processCall(RemoteServiceServlet.java:263)
            at com.google.gwt.user.server.rpc.RemoteServiceServlet.processPost(RemoteServiceServlet.java:305)
            at com.google.gwt.user.server.rpc.AbstractRemoteServiceServlet.doPost(AbstractRemoteServiceServlet.java:62)
            at javax.servlet.http.HttpServlet.service(HttpServlet.java:751)
            at javax.servlet.http.HttpServlet.service(HttpServlet.java:844)
            at weblogic.servlet.internal.StubSecurityHelper$ServletServiceAction.run(StubSecurityHelper.java:280)
            at weblogic.servlet.internal.StubSecurityHelper$ServletServiceAction.run(StubSecurityHelper.java:254)
            at weblogic.servlet.internal.StubSecurityHelper.invokeServlet(StubSecurityHelper.java:136)
            at weblogic.servlet.internal.ServletStubImpl.execute(ServletStubImpl.java:341)
            at weblogic.servlet.internal.ServletStubImpl.execute(ServletStubImpl.java:238)
            at weblogic.servlet.internal.WebAppServletContext$ServletInvocationAction.wrapRun(WebAppServletContext.java:3376)
            at weblogic.servlet.internal.WebAppServletContext$ServletInvocationAction.run(WebAppServletContext.java:3346)
            at weblogic.security.acl.internal.AuthenticatedSubject.doAs(AuthenticatedSubject.java:321)
            at weblogic.security.service.SecurityManager.runAs(SecurityManager.java:120)
            at weblogic.servlet.provider.WlsSubjectHandle.run(WlsSubjectHandle.java:57)
            at weblogic.servlet.internal.WebAppServletContext.doSecuredExecute(WebAppServletContext.java:2230)
            at weblogic.servlet.internal.WebAppServletContext.securedExecute(WebAppServletContext.java:2146)
            at weblogic.servlet.internal.WebAppServletContext.execute(WebAppServletContext.java:2124)
            at weblogic.servlet.internal.ServletRequestImpl.run(ServletRequestImpl.java:1564)
            at weblogic.servlet.provider.ContainerSupportProviderImpl$WlsRequestExecutor.run(ContainerSupportProviderImpl.java:254)
            at weblogic.work.ExecuteThread.execute(ExecuteThread.java:312)
            at weblogic.work.ExecuteThread.run(ExecuteThread.java:264)

e.g。使用:

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

这里没有jquery

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

e.g。使用:

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

答案 1 :(得分:6)

使用加载回调

$("#tempMain").load($(this).attr("href"),function(){
   resizeDivs();
   // do other stuff load is completed
});

答案 2 :(得分:2)

您可以在jQuery load函数中附加回调:

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

请参阅:http://api.jquery.com/load/

答案 3 :(得分:0)

一个简单的脚本,用于检查是否加载了(动态)DIV:

button