Javascript 预加载器不等待图像

Question

我发现这个 Javascript 可以激活我的 website的预加载器。然而，它似乎在页面加载后消失，而不是在图像加载完成后消失。

搜索后，我发现有人建议 window.onload 等待图像加载，但我似乎不知道如何将其实现到我现有的 Javascript 中。

$(document).ready(function(){
        $(".se-pre-con").fadeOut("slow")

Answer 1

如果您想使用window.onload函数来隐藏预加载器，您可以使用以下代码片段附加到 jQuery 中的事件:

$(window).on('load', function () {
    $(".se-pre-con").fadeOut("slow");
}):

确保使用.on()方法签名而不是事件签名 .load() ，它在 jQuery 1.8 中已弃用，并在 jQuery 3.0 中删除。

您应该注意 .load() 中的以下内容文档:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache