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

Execute jQuery function after image is downloaded or after some delay

本文关键字：执行 jQuery 函数 一段时间 下载 图像 延迟      更新时间：2023-09-26

我想将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的高度更大，为两个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" })
    }
});

加载图像后的简单代码。

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

根据您要执行的操作：

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

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

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

更新

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

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

场景在这里很好地解释

如果要在

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

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

或

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

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

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

jQuery(window).load(function(){
  //your code here
  alert("All the assets of the page have been loaded");
});
相关文章：