Question

我想将这部分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＆amp; 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" })
    }
});

Answer 1

加载图像后的简单代码。

var img = $(something_to_find_image)
img.ready(function_to_call_after_load_of_image)

Answer 2

取决于您想要做什么：

$(document).ready()（图像可能仍在加载中）
$(window).load()在加载完所有内容（包括图片）后触发。

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

Answer 3

<强>更新

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

$(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" })
    }
});

情景很好地解释了here

Answer 4

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

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

或

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

$（document）.ready只会在DOM准备好后调用和 $（window）.load（）在其他所有内容准备就绪后（最适合您的需求）

Answer 5

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

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

});

下载图像后或延迟一段时间后执行jQuery函数

5 个答案: