Question

我试图获得一个gif，我必须在页面加载后淡出，但我没有太多运气。

我希望具有白色背景和gif的叠加层在页面上的其他所有内容都加载后可以淡入透明度，并且可以随时查看。

以下是我的代码，以及指向我测试过的网页的链接：

任何想法？

<?xml version="1.0" encoding="utf-8" ?>
<objects xmlns="http://www.springframework.net">
<description>Declaracion e integracion de servicios de infraestructura.</description>

  <!-- AOP Advices -->
  <object id="MethodInterceptor" type="Mvm.SATWeb.Core.Comun.AOP.MethodInterceptor, Mvm.SATWeb.Core" />

  <!-- Servicio SIDUtil -->
  <object id="UtilService" type="Mvm.SATWeb.ServicesLiquidez.Comun.Helpers.SATWebUtil, Mvm.SATWeb.ServicesLiquidez">
  </object>

  <!-- configuracion de mensajes -->
  <object id="messageSource" type="Spring.Context.Support.ResourceSetMessageSource, Spring.Core">
    <property name="ResourceManagers">
      <list>
        <value>Resources.Mensajes, App_GlobalResources</value>
      </list>
    </property>
  </object>

  <object id="LocalizacionLenguajeService"
          type="Mvm.Localizacion.Lenguaje.ClientAPI.LenguajeServiceSpringResx, Mvm.Localizacion.Lenguaje.ClientAPI">
  </object>



</objects>

CSS：

<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>

Answer 1

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

我最近在SO：Docs中为document-ready handlers做出了贡献，我认为很多人在切换到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
});

jQuery 3.0中不推荐使用所有其他支持文档的处理程序。

即使您将jQuery包含在代码中，使用该doc-ready处理程序仍然有效。

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

1 个答案: