javascript - 尽管调用了 .fadeOut 命令，但 Gif 没有淡出

Question

我正在尝试获取一个 gif，我必须在页面加载后淡出，但我的运气不佳。

我希望具有白色背景和 gif 的叠加层在页面上的所有其他内容加载完毕并准备好显示后淡入透明。

下面是我的代码，还有一个指向我测试它的页面的链接:

Link to test code

有什么想法吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
          src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
          integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
          crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!

<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>

还有 CSS:

#overlay {
    background-color: white;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
}

Answer 1

您使用多个版本的 jQuery。如果您删除 jQuery 3 的包含，或进行以下更改，它将起作用。

我最近为 document-ready handlers 做出了贡献在此处适用的 SO:Docs 中，我认为许多人在切换到 jQuery 3 时不会意识到。

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

All other document-ready handlers are deprecated in jQuery 3.0.

即使您在代码中保留两个 jQuery 包含，也可以使用该文档就绪处理程序。