1

我想将这部分 jquery 代码延迟 2 秒

//set equal height of two div's
//$(".pg-right-bar").css({ "height": $("#pg-left-bar").height() })
var leftbar = $(".pg-left-bar").height();
var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
leftbar = leftbar - 20;

if (leftbar > rightbar) 
{
    $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
}
else 
{
    $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
    $(".pg-right-bar").css({ "height": rightbar+"px" })
}

实际上我的页面有两个 div pg-left-bar div，pg-right-bar div我的左栏 div 有页面内容，右栏 div 有图像。我必须根据哪个高度更大，为两个 div 分配相同的高度。

所以我为此使用上述逻辑，但此代码的问题是它在下载右栏图像之前执行，这导致大多数情况下第一个条件为真。有没有办法可以延迟此代码的执行，直到pg-right-bar下载图像。

或者我怎样才能将此代码包装在一个延迟 3 秒的函数中。

经过故障排除后，我得出的结论是代码逻辑很好，这是需要时间下载的图像，并且在 jquery 之间执行并为两个 div 分配了错误的尺寸

完全的...

jQuery(document).ready(function () {
    App.init();
    App.initNavMenu();
    //Tabs
    App.InitCustomTabs();
    App.initMarqueeBrands();
    //activatte tooltip
    $('.tooltip').tooltipster();
});

更新

我通过将代码包装在以下函数中解决了这个问题。

$(window).load(function() {
    var leftbar = $(".pg-left-bar").height();
    var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
    leftbar = leftbar - 20;
    if (leftbar > rightbar) 
    {
        $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
    }
    else 
    {
        $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
        $(".pg-right-bar").css({ "height": rightbar+"px" })
    }
});
4

5 回答 5

1

取决于你想做什么：

  • $(document).ready()在 DOM 加载后立即触发（图像可能仍在加载中）

  • $(window).load()在加载所有内容（包括图像）后触发。

我假设您想等到所有内容都加载完毕，因此您可以使用$(window).load(). 但是，如果您想在加载所有图像之前显示纺车、沙漏等，请将其显示在内部$(document).ready()并将其隐藏在内部$(window).load()。

于 2013-09-12T11:05:57.210 回答
1

加载图像后的简单代码。

var img = $(something_to_find_image)
img.ready(function_to_call_after_load_of_image)
于 2013-09-12T11:03:39.360 回答
0

如果要在图像加载后执行代码，设置 2 秒延迟是草率的。它可能运行得太早，也可能运行得太晚。应该避免在持续时间不固定的事件之后使用固定延迟来执行代码，而是使用：

$(document).ready(function () {
  //code goes here
});

或者

$(window).load(function () {
  //code goes here
});

$(document).ready 只会在 DOM 准备好后调用，而 $(window).load() 只会在其他一切准备好后调用（最适合您的需要）

于 2013-09-12T11:06:47.117 回答
0

jQuery 提供了 load()事件方法，可用于在窗口完全加载后调用函数。

jQuery(window).load(function(){
  //your code here
  alert("All the assets of the page have been loaded");

});
于 2013-09-12T11:08:20.110 回答
0

更新

我通过将代码包装在以下函数中解决了这个问题。

$(window).load(function() {
            var leftbar = $(".pg-left-bar").height();
    var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
    leftbar = leftbar - 20;

    if (leftbar > rightbar) {
        $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
    }
    else {
        $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
        $(".pg-right-bar").css({ "height": rightbar+"px" })
    }
});

场景在这里得到了很好的解释

于 2013-09-12T11:03:52.107 回答