jQuery ¿Cómo se obtiene una imagen a desvanecerse en la carga?
https://stackoverflow.com/questions/1383870
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Todo lo que quiero hacer es desvanecen mi logotipo en la página de carga. Soy nuevo hoy para jQuery y no puedo logrado fadeIn de la carga de ayuda por favor. Lo siento si esta pregunta ya ha sido contestada he tenido una mirada y tratar de adaptar otras respuestas para la cuestión diferente, pero nada parece funcionar y su empezando a frustrar.
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>
Solución 13
Me averiguar la respuesta! Es necesario utilizar la función window.onload como se muestra a continuación. Gracias al chico Tec y Karim por la ayuda. Nota: Todavía es necesario utilizar la función de lista de documentos también.
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
También trabajó para mí cuando se coloca justo después de la imagen ... Gracias
Otros consejos
Este hilo parece innecesariamente polémico.
Si realmente quiere resolver esta pregunta correctamente, usando jQuery, por favor ver la solución a continuación.
La pregunta es "jQuery ¿Cómo se obtiene una imagen a desvanecerse en la carga?"
En primer lugar, una nota rápida.
Esto no es un buen candidato para $ (document) ready ...
¿Por qué? Debido a que el documento está listo cuando se carga el DOM HTML. La imagen del logotipo no estará listo en este punto - que aún se esté descargando, de hecho
Así que para responder en primer lugar a la cuestión general "jQuery ¿Cómo se obtiene una imagen a desvanecerse en la carga?" - la imagen de este ejemplo tiene un id = "logo" atributo:
$("#logo").bind("load", function () { $(this).fadeIn(); });
Esto es exactamente lo que la pregunta se refiere. Cuando la imagen se haya cargado, se desvanecerá. Si cambia la fuente de la imagen, cuando se haya cargado la nueva fuente, se desvanecerá en.
No es 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 particular de cuidado. Esto se debe a que si se utiliza más de una vez, se sobrescribe sus eventos anteriores. Ejemplo (no dude en probarlo ...).
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Por supuesto, usted no tendría tres eventos onload tan cerca juntos en su código. Lo más probable es tener un script que hace algo proceso de carga, y luego agregar el controlador de window.onload a desvanecerse en su imagen - "¿Por qué mi presentación de diapositivas dejó de funcionar !!?" -., Debido al problema window.onload
Una gran característica de jQuery es que cuando se unen los eventos usando jQuery, todos ellos se han agregado.
Así que ahí lo tienes - la cuestión ya ha sido marcado como respondida, pero la respuesta parece ser insuficiente sobre la base de todos los comentarios. Espero que esto ayude a llegar de los motores de búsqueda del mundo!
Hay un error de sintaxis en la línea 5:
$('#logo').hide();.fadeIn(3000);
En caso de ser:
$('#logo').hide().fadeIn(3000);
Activar con el estilo del logotipo para display:hidden y fadeIn llamada, en lugar de primera hide llamada:
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
Para hacer esto con múltiples imágenes que necesita para funcionar a través de una función de .each(). Esto funciona, pero no estoy seguro de qué tan eficiente es.
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
window.onload no es tan confiable .. yo usaría:
<script type="text/javascript">
$(document).ready(function () {
$('#logo').hide().fadeIn(3000);
});
</script>
Usando los ejemplos de Sohnee y karim79. He probado esto y funcionó tanto en FF3.6 e 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"/>
La clave es usar $(window).load(function(){} por lo que sabemos se carga la imagen. Ocultar la imagen a través de la función css luego se desvanecen en el uso de fadeIn:
$(function() {
$(window).load(function(){
$('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
});
});
Idea de: http://www.getpeel.com/
Uso Desandro es imagesloaded plug-in
1 - imágenes esconden en CSS:
#content img {
display:none;
}
2 - aparición gradual de la carga de imágenes en con javascript:
var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
$(image.img).fadeIn();
});
Aceptar así que lo hice y funciona. Se trata básicamente hackeado desde diferentes respuestas aquí. Puesto que no es TODAVÍA no es una respuesta clara en este tema he decidido publicar esto.
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
Esto me parece ser la mejor manera de hacerlo. A pesar de las mejores intenciones de Sohnee no mencionó que el objeto primero debe ser configurado para mostrar: ninguno con CSS. El problema aquí es que si por cualquier motivo JS del usuario no está trabajando el objeto se acaba nunca aparecen. No es bueno, especialmente si es el logotipo frikin'.
Esto deja la solución del tema solo en el CSS, y las primeras pieles, entonces se desvanece en todos usando JS. De esta manera si JS no está funcionando adecuadamente el tema se acaba de cargar de forma normal.
La esperanza que ayuda a cualquier otra persona que tropieza en este Google ocupa el puesto # 1 hilo no tan útiles.
Al igual que Söhne menciona, pero me gustaría añadir lo siguiente:
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
o
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
Me trató 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 la siguiente funcionaba 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>
Solución CSS3 jQuery +
Yo quería una solución que no emplearon efecto de fundido de jQuery ya que esto provoca retraso en muchos dispositivos móviles.
Los préstamos de la respuesta de Steve Fenton he adaptado una versión de este que se desvanece la imagen en la transición con la propiedad CSS3 y opacidad. Esto también tiene en cuenta el problema de la caché del navegador, en cuyo caso la imagen no se mostrará el uso de CSS.
Aquí está mi código y de trabajo violín:
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;
}
jQuery fragmentos
$(".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á pasando aquí es la imagen (o cualquier otro elemento) que desea hacer desaparecer cuando éste se carga tendrán que tener la clase .fade-in-on-load aplica a ella de antemano. Esto asignará un 0 opacidad y asignar el efecto de transición, puede modificar la velocidad de desvanecimiento a gusto en la CSS.
A continuación, el JS buscará cada elemento que tiene la clase y se unen al evento de carga a la misma. Una vez hecho esto, la opacidad se establece en 1, y la imagen se desvanecerá. Si la imagen ya se almacena en la memoria caché del navegador ya, se desvanecerá en forma inmediata.
El uso de este para una página de ficha de producto.
Esto no puede ser la aplicación más bonito, pero lo hace bien el trabajo.
