0

Estoy queriendo que se oculte, ni bien carga la página, una imagen de tipo .gif que está dentro de un div. Pero no comprendo por qué se muestra dicha imagen, si yo estoy ocultando el div desde JQuery de la siguiente forma ($("#carga").hide();)

En HTML lo tengo así dentro del body:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
...
    <div id='carga'><img src="Imagenes/Carga2.gif" alt="Cargando artículo..."></div>
...
</body>
</html>

... y luego desde JQuery lo oculto ni bien carga la página, pero esto no sucede. Siempre se muestra cuando se carga la página:

<script>
$().ready(function()
{
    $("#carga").hide();
    ...
    ...
});
</script>

Además lo estoy ocultado en el load, no entiendo que pasa y porque me muestra dicha imagen. ¿Será que el <div id='carga'> no puede ocultar otro objeto dentro suyo, en este caso de tipo img?

Nota: La imagen se muestra cuando se carga la página, pero desaparece a los pocos segundos, luego de terminar de cargar demás cosas de JQuery (botones, jQuery Autocomplete...). Aclarar también que la línea $("#carga").hide(); esta puesta al principio de todo en el $().ready(function(){....

1
  • 1
    Tu codigo funciona bien.
    – alanfcm
    Commented el 15 ago. 2019 a las 14:41

1 respuesta 1

0

He puesto tu código en un snipet y funciona muy bien.

Lo que también puedes haces es ocultarlo con attr desde Jquery así:

$().ready(function() {
    $("#carga").attr("hidden", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Este div incial no esta oculto </div>
<br>
<div><img src="Imagenes/Carga2.gif" alt="Cargando artículo..."></div>
<br>
<div id='carga'><img src="Imagenes/Carga2.gif" alt="Cargando artículo..."></div>
<br>
<div>Este div final no esta oculto </div>

Si ves el código agregue varios div para que puedas ver cual esta y cual no oculto.

7
  • No, si tengo las referencias, sólo que aquí no las puse. Es muy raro lo que pasa. De todas formas por el momento lo solucione agregando display:none o sea <div id='carga' style='display:none'>. No sé si es la mejor solución, pero de esta manera no me carga la imagen. Commented el 15 ago. 2019 a las 14:58
  • o puedes probar la propiedad attr, ya modifico la respuesta y realizas la prueba Commented el 15 ago. 2019 a las 14:59
  • Modifique la respuesta realiza la prueba a ver si te funciona con attr si no porfa edita tu pregunta y sube todo el código para poder encontrar el error. Commented el 15 ago. 2019 a las 15:02
  • No, no pasa nada. Me doy cuenta que desde JQuery lo llega a ocultar luego de unos segundos (después de cargar ciertas otras cosas como botones, jquery autocomplete...). Sólo desde HTML5 lo hace de inmediato, como ya dije, agregando display:none. Todo el código es muy largo, por eso no lo pongo y solo puse una parte. Se perderían más si lo pusiera (es que tengo mucho código de PHP y de JavaScript). Commented el 15 ago. 2019 a las 15:27
  • Debes de poner el codigo que oculta , de primero en el document.ready ya que si lo pones al final o en la mitad primero va hacer lo que tienes antes y por eso se muestra hasta que llega al fragmento donde lo oculta, por eso en el snipet funciona bien por que solo esta ese codigo Commented el 15 ago. 2019 a las 15:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.