has - jquery name attribute
jQuery ¿Cómo consigues que una imagen se desvanezca con la carga? (13)
¡Averiguar la respuesta! Debe utilizar la función window.onload como se muestra a continuación. Gracias a Tec chico y Karim por la ayuda. Nota: también debe utilizar la función de preparación de documentos.
window.onload = function() {$(''#logo'').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$(''#div'').hide().fadeIn(750););
También funcionó para mí cuando se colocó justo después de la imagen ... Gracias
Todo lo que quiero hacer es fundir mi logotipo en la página de carga. Hoy soy nuevo en jQuery y no puedo manejar el fadeIn en la carga, por favor, ayuda. Disculpe si esta pregunta ya ha sido respondida. He echado un vistazo y trato de adaptar otras respuestas para preguntas diferentes, pero nada parece funcionar y está empezando a frustrarme.
Gracias.
Código:
<script type="text/javascript">
$(function () {
.load(function () {
// set the image hidden by default
$(''#logo'').hide();.fadeIn(3000);
}}
</script>
<link rel="stylesheet" href="challenge.css"/>
<title>Acme Widgets</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="logo" src="logo-smaller.jpg" />
</div>
<div id="nav">
navigation
</div>
<div id="leftCol">
left col
</div>
<div id="rightCol">
<div id="header2">
header 2
</div>
<div id="centreCol">
body text
</div>
<div id="rightCol2">
right col
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Como Sohne menciona, pero yo añadiría esto:
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
o:
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
Este hilo parece innecesariamente controvertido.
Si realmente desea resolver esta pregunta correctamente, utilizando jQuery, consulte la solución a continuación.
La pregunta es "jQuery ¿Cómo lograr que una imagen se desvanezca con la carga?"
Primero, una nota rápida.
Este no es un buen candidato para $ (documento) .ready ...
¿Por qué? Porque el documento está listo cuando se carga el DOM HTML. La imagen del logotipo no estará lista en este momento. ¡De hecho, puede que se esté descargando!
Entonces, para responder primero a la pregunta general "jQuery, ¿cómo lograr que una imagen se desvanezca con la carga?" - la imagen en este ejemplo tiene un atributo id = "logo":
$("#logo").bind("load", function () { $(this).fadeIn(); });
Esto hace exactamente lo que la pregunta hace. Cuando la imagen se haya cargado, se desvanecerá. Si cambia la fuente de la imagen, cuando se haya cargado la nueva fuente, se desvanecerá.
Hay un comentario sobre el uso de window.onload junto con jQuery. Esto es perfectamente posible. Funciona. Se puede hacer. Sin embargo, el evento window.onload necesita un poco de cuidado particular. Esto se debe a que si lo usa más de una vez, sobrescribe sus eventos anteriores. Ejemplo (no dudes en probarlo ...).
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Por supuesto, no tendrías tres eventos onload tan juntos en tu código. Lo más probable es que tenga una secuencia de comandos que haga algo en la carga, y luego agregue su controlador window.onload para que aparezca en su imagen. "¿¡Por qué mi presentación de diapositivas dejó de funcionar?" - debido al problema de window.onload.
Una gran característica de jQuery es que cuando unes eventos usando jQuery, todos se agregan.
Así que ahí lo tienen, la pregunta ya ha sido marcada como contestada, pero la respuesta parece ser insuficiente en base a todos los comentarios. Espero que esto ayude a cualquiera que llegue desde los motores de búsqueda del mundo!
La clave es usar $(window).load(function(){} para que sepamos que la imagen está cargada. Oculte la imagen mediante la función css y luego difumínela utilizando fadeIn:
$(function() {
$(window).load(function(){
$(''#logo'').css({visibility: ''visible'', opacity: 0}).fadeIn(1000);
});
});
Idea de: http://www.getpeel.com/
OK, así que hice esto y funciona. Es básicamente hackeado juntos de diferentes respuestas aquí. Como TODAVÍA no hay una respuesta clara en este hilo, decidí publicar esto.
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
Esto me parece que es la mejor manera de hacerlo. A pesar de las mejores intenciones de Sohnee, no mencionó que el objeto debe configurarse primero para mostrar: ninguno con CSS. El problema aquí es que si por alguna razón el JS del usuario no funciona, el objeto nunca aparecerá. No es bueno, especialmente si es el logotipo de frikin.
Esta solución deja el elemento solo en el CSS, y primero lo oculta, luego lo desvanece en todos usando JS. De esta forma, si JS no funciona correctamente, el elemento se cargará normalmente.
Espero que esto ayude a cualquier otra persona que se tropiece en este subproceso no muy útil clasificado en Google # 1.
Para hacer esto con varias imágenes, debe ejecutar una función .each() . Esto funciona pero no estoy seguro de cuán eficiente es.
$(''img'').hide();
$(''img'').each( function(){
$(this).on(''load'', function () {
$(this).fadeIn();
});
});
Probé el siguiente pero no funcionó;
<span style="display: none;" id="doneimg">
<img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
</span>
<script type="text/javascript">
//$(document).ready(function () {
$("#doneimg").bind("load", function () { $(this).fadeIn(''slow''); });
//});
</script>
bu el siguiente funcionó bien;
<script type="text/javascript">
$(document).ready(function () {
$(''#doneimg'').fadeIn("normal");
});
</script>
<span style="display: none;" id="doneimg">
<img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
</span>
Simplemente configure el estilo del logotipo para display:hidden y fadeIn llamada, en lugar de hide primero la llamada:
$(document).ready(function() {
$(''#logo'').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
Tiene un error de sintaxis en la línea 5:
$(''#logo'').hide();.fadeIn(3000);
Debiera ser:
$(''#logo'').hide().fadeIn(3000);
Usando los ejemplos de Sohnee y karim79. Probé esto y funcionó tanto en FF3.6 como en IE6.
<script type="text/javascript">
$(document).ready(function(){
$("#logo").bind("load", function () { $(this).fadeIn(''slow''); });
});
</script>
<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>
window.onload no es tan confiable .. Yo usaría:
<script type="text/javascript">
$(document).ready(function () {
$(''#logo'').hide().fadeIn(3000);
});
</script>
Solución CSS3 + jQuery
Quería una solución que NO emplee el efecto de desvanecimiento de jQuery ya que esto provoca un retraso en muchos dispositivos móviles.
Tomando prestada la respuesta de Steve Fenton, he adaptado una versión de esto que desvanece la imagen con la propiedad de transición CSS3 y la opacidad. Esto también tiene en cuenta el problema del almacenamiento en caché del navegador, en cuyo caso la imagen no se mostrará mediante CSS.
Aquí está mi código y mi violín de trabajo :
HTML
<img src="http://placehold.it/350x150" class="fade-in-on-load">
CSS
.fade-in-on-load {
opacity: 0;
will-change: transition;
transition: opacity .09s ease-out;
}
Fragmento de jQuery
$(".fade-in-on-load").each(function(){
if (!this.complete) {
$(this).bind("load", function () {
$(this).css(''opacity'', ''1'');
});
} else {
$(this).css(''opacity'', ''1'');
}
});
Lo que está sucediendo aquí es la imagen (o cualquier elemento) en la que desee .fade-in-on-load cuando se cargue, deberá tener la .fade-in-on-load aplicada de antemano. Esto le asignará una opacidad de 0 y le asignará el efecto de transición, puede editar la velocidad de desvanecimiento para probar el CSS.
Luego, JS buscará cada elemento que tenga la clase y vinculará el evento de carga. Una vez hecho esto, la opacidad se establecerá en 1, y la imagen se desvanecerá. Si la imagen ya estaba almacenada en el caché del navegador, se desvanecerá de inmediato.
Usando esto para una página de listado de productos.
Puede que esta no sea la implementación más bonita, pero funciona bien.
Usando el complemento cargado de imágenes de Desandro
1 - ocultar imágenes en css:
#content img {
display:none;
}
2 - fundido en imágenes en carga con javascript:
var imgLoad = imagesLoaded("#content");
imgLoad.on( ''progress'', function( instance, image ) {
$(image.img).fadeIn();
});