jQuery Como você consegue uma imagem para desaparecer?
https://stackoverflow.com/questions/1383870
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Tudo o que eu quero fazer é desbotar meu logotipo no carregamento da página. Hoje sou novo para o JQuery e não consigo desaparecer em carga, por favor me ajude. Desculpe se essa pergunta já foi respondida, dei uma olhada e tentei adaptar outras respostas para perguntas diferentes, mas nada parece funcionar e está começando a me frustrar.
Obrigado.
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>
Solução 13
Eu descobri a resposta! Você precisa usar a função Window.onload, como mostrado abaixo. Obrigado a Tec Guy e Karim pela ajuda. Nota: Você ainda precisa usar a função pronta do documento também.
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
Também funcionou para mim quando colocado logo após a imagem ... obrigado
Outras dicas
Este tópico parece desnecessariamente controverso.
Se você realmente deseja resolver essa pergunta corretamente, usando o jQuery, consulte a solução abaixo.
A questão é "jQuery, como você consegue uma imagem para desaparecer?"
Primeiro, uma nota rápida.
Este não é um bom candidato para $ (documento) .ready ...
Por quê? Porque o documento está pronto quando o HTML DOM estiver carregado. A imagem do logotipo não estará pronta neste momento - ela ainda pode estar baixando de fato!
Então, para responder primeiro à pergunta geral "jQuery como você consegue uma imagem para desaparecer?" - A imagem neste exemplo tem um atributo id = "logotipo":
$("#logo").bind("load", function () { $(this).fadeIn(); });
Isso faz exatamente o que a pergunta faz. Quando a imagem estiver carregada, ela desaparecerá. Se você alterar a fonte da imagem, quando a nova fonte for carregada, ela desaparecerá.
Há um comentário sobre o uso do Window.onload ao lado do jQuery. Isso é perfeitamente possível. Funciona. Pode ser feito. No entanto, o evento Window.onload precisa de um pouco de cuidado. Isso ocorre porque, se você o usar mais de uma vez, substitui seus eventos anteriores. Exemplo (fique à vontade para tentar ...).
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Obviamente, você não teria três eventos de Onload tão próximos em seu código. Você provavelmente teria um script que faz algo ONLOAD e, em seguida, adicione sua janela. - por causa do problema da janela.
Uma ótima característica do jQuery é que, quando você vincula eventos usando o jQuery, todos eles são adicionados.
Então, aí está - a pergunta já foi marcada como respondida, mas a resposta parece ser insuficiente com base em todos os comentários. Espero que isso ajude alguém a chegar dos mecanismos de busca do mundo!
Você tem um erro de sintaxe na linha 5:
$('#logo').hide();.fadeIn(3000);
Deveria estar:
$('#logo').hide().fadeIn(3000);
Basta definir o estilo do logotipo para display:hidden e ligue fadeIn, em vez de primeiro chamar hide:
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
Para fazer isso com várias imagens que você precisa executar embora um .each() função. Isso funciona, mas não tenho certeza de quão eficiente é.
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
window.onload não é tão confiável .. eu usaria:
<script type="text/javascript">
$(document).ready(function () {
$('#logo').hide().fadeIn(3000);
});
</script>
Usando os exemplos de Sohnee e Karim79. Eu testei isso e funcionou em 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"/>
A chave é usar $(window).load(function(){} Então sabemos que a imagem está carregada. Esconder a imagem através da função CSS e depois desbota -a usando o Fadein:
$(function() {
$(window).load(function(){
$('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
});
});
Ideia de: http://www.getpeel.com/
Usando Images de Desandro carregou plugar
1 - Ocultar imagens no CSS:
#content img {
display:none;
}
2 - Desbotado em imagens em carga com javascript:
var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
$(image.img).fadeIn();
});
Ok, então eu fiz isso e funciona. É basicamente invadido de diferentes respostas aqui. Já que existe AINDA Não é uma resposta clara neste tópico, decidi postar isso.
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
Essa parece ser a melhor maneira de fazer isso. Apesar das melhores intenções de Sohnee, ele não mencionou que o objeto deve primeiro ser definido para exibir: nenhum com CSS. O problema aqui é que, se, por qualquer motivo, o JS do usuário não estiver funcionando, o objeto nunca aparecerá. Não é bom, especialmente se for o logotipo Frikin.
Esta solução deixa o item sozinho no CSS e primeiro se esconde, depois desaparece em tudo usando JS. Dessa forma, se o JS não estiver funcionando corretamente, o item será carregado como normal.
Espero que ajude qualquer outra pessoa que tropeça nesse Google classificou o número 1 não tão indicado.
Como Sohne menciona, mas eu acrescentaria isso:
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
ou:
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
Eu tentei o seguinte, mas não funcionei;
<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 o seguinte funcionou muito bem;
<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>
Solução CSS3 + JQuery
Eu queria uma solução que não empregasse o efeito de desbotamento da JQuery, pois isso causa o atraso em muitos dispositivos móveis.
Emprestando de Resposta de Steve Fenton Adaptei uma versão disso que desaparece com a propriedade de transição e opacidade do CSS3. Isso também leva em consideração o problema do cache do navegador; nesse caso, a imagem não será exibida usando CSS.
Aqui está o meu código e violino de trabalho:
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;
}
Snippet jQuery
$(".fade-in-on-load").each(function(){
if (!this.complete) {
$(this).bind("load", function () {
$(this).css('opacity', '1');
});
} else {
$(this).css('opacity', '1');
}
});
O que está acontecendo aqui é a imagem (ou qualquer elemento) que você deseja desaparecer quando carregar .fade-in-on-load classe aplicada a ela de antemão. Isso atribuirá a ele uma opacidade e atribuirá o efeito de transição, você pode editar a velocidade do desbotamento para provar no CSS.
Em seguida, o JS pesquisará cada item que possui a classe e vinculará o evento de carga a ele. Uma vez feito, a opacidade será definida como 1 e a imagem desaparecerá. Se a imagem já foi armazenada no cache do navegador, ela desaparecerá imediatamente.
Usando isso para uma página de listagem de produtos.
Essa pode não ser a implementação mais bonita, mas funciona bem.
