jQuery Come si ottiene un'immagine a svanire nel carico?
https://stackoverflow.com/questions/1383870
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Tutto quello che voglio fare è dissolvenza mio logo in al caricamento della pagina. Sono nuovo oggi per jQuery e non posso riuscito a fadeIn del carico si prega di aiuto. Scusate se questa domanda è già stato risposto che ho dato un'occhiata e cercare di adattare altre risposte per domanda diversa, ma nulla sembra funzionare e la sua partenza a frustrare me.
Grazie.
Codice:
<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>
Soluzione 13
ho dato la risposta! È necessario utilizzare la funzione window.onload come illustrato di seguito. Grazie al ragazzo Tec e Karim per l'aiuto. Nota: è comunque necessario utilizzare la funzione di pronto documento troppo.
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
E 'inoltre lavorato per me quando sono immessi subito dopo l'immagine ... Grazie
Altri suggerimenti
Questo thread sembra inutilmente polemico.
Se si vuole veramente risolvere questo problema in modo corretto, utilizzando jQuery, si prega di vedere la soluzione qui di seguito.
La domanda è: "jQuery Come si ottiene un'immagine a svanire nel carico?"
In primo luogo, una breve nota.
Questo non è un buon candidato per $ (document) .ready ...
Perché? Poiché il documento è pronto quando viene caricato il DOM HTML. L'immagine del logo non sarà pronto a questo punto - può ancora essere scaricato infatti
Quindi, per rispondere prima alla domanda generale "jQuery Come si ottiene un'immagine a svanire nel carico?" - l'immagine in questo esempio ha un id = "logo" attributo:
$("#logo").bind("load", function () { $(this).fadeIn(); });
Questo fa esattamente ciò che la domanda chiede. Quando l'immagine è stata caricata, svanirà. Se si modifica l'origine dell'immagine, quando la nuova fonte è stato caricato, svanirà in.
C'è un commento sull'utilizzo window.onload al fianco di jQuery. Questo è perfettamente possibile. Funziona. Si può fare. Tuttavia, l'evento window.onload ha bisogno di un po 'particolare di cura. Questo perché se lo si utilizza più di una volta, si sovrascrive gli eventi precedenti. Esempio (sentitevi liberi di provarlo ...).
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Naturalmente, non avreste tre eventi onload così vicini nel codice. Si sarebbe molto probabilmente avere uno script che fa qualcosa onload, e quindi aggiungere il gestore window.onload a svanire nella vostra immagine - "perché ha la mia presentazione ha smesso di funzionare !!?" -. A causa del problema window.onload
Una grande caratteristica di jQuery è che quando si associa gli eventi utilizzando jQuery, tutti vengono aggiunti.
Così là lo avete - la questione è già stata contrassegnata come risposta, ma la risposta sembra essere insufficiente sulla base di tutti i commenti. Spero che questo aiuta chi arriva dai motori di ricerca di tutto il mondo!
Si dispone di un errore di sintassi sulla linea 5:
$('#logo').hide();.fadeIn(3000);
Dovrebbe essere:
$('#logo').hide().fadeIn(3000);
impostare semplicemente lo stile del logo per display:hidden e chiamare fadeIn, invece di prima convocazione hide:
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
Per fare questo con più immagini è necessario eseguire attraverso una funzione .each(). Questo funziona ma non sono sicuro di come sia efficiente.
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
window.onload non è così affidabile .. vorrei utilizzare:
<script type="text/javascript">
$(document).ready(function () {
$('#logo').hide().fadeIn(3000);
});
</script>
Usare gli esempi da Sohnee e karim79. Ho provato questo e ha funzionato sia in 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 chiave è quella di utilizzare $(window).load(function(){} quindi sappiamo l'immagine viene caricata. Nascondere l'immagine tramite la funzione css poi svanire nel usando fadeIn:
$(function() {
$(window).load(function(){
$('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
});
});
Idea da: http://www.getpeel.com/
Utilizzo imagesloaded plug di Desandro
1 - nascondere le immagini in css:
#content img {
display:none;
}
2 - fade in immagini sul carico con javascript:
var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
$(image.img).fadeIn();
});
OK così ho fatto questo e funziona. E 'fondamentalmente messo insieme da diverse risposte qui. Poiché non v'è STILL non è una risposta chiara a questa discussione ho deciso di pubblicare questo.
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
Questa mi sembra essere il modo migliore per andare su di esso. Nonostante le migliori intenzioni di Sohnee ha omesso di menzionare che l'oggetto deve prima essere impostata su display: none con i CSS. Il problema qui è che se per quale motivo JS dell'utente non funziona l'oggetto sarà solo mai apparire. Non va bene, soprattutto se è il logo frikin.
Questa soluzione lascia l'elemento da solo in CSS, e prima nasconde e poi svanisce in tutto utilizzando JS. In questo modo se JS non funziona correttamente l'articolo sarà basta caricare come normale.
La speranza che aiuta chiunque altro che si imbatte in questo google classificato # 1 non-così-utile thread.
Come Sohne cita, ma vorrei aggiungere questo:
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
o
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
Ho provato quanto segue uno, ma non ha funzionato;
<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 seguente funzionato bene;
<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>
CSS3 + jQuery Soluzione
volevo una soluzione che non impiegano effetto di dissolvenza di jQuery come questo provoca ritardo in molti dispositivi mobili.
Prestito dalla risposta di Steve Fenton ho adattato una versione di questo che sfuma l'immagine con la proprietà CSS3 transizione e opacità. Questo tiene conto anche del problema di caching del browser, nel qual caso l'immagine non verrà mostrata usando i CSS.
Ecco il mio codice e lavorare violino :
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');
}
});
Quello che sta succedendo qui è l'immagine (o qualsiasi elemento) che si desidera a svanire in quando carica dovrà avere la classe .fade-in-on-load applicato ad esso in anticipo. Questo assegnerà un 0 opacità e di assegnare l'effetto di transizione, è possibile modificare la velocità di dissolvenza da gustare in CSS.
Poi il JS cercherà ogni voce che ha la classe e legare l'evento carico ad esso. Una volta fatto, l'opacità sarà impostato a 1, e l'immagine svanirà. Se l'immagine è stata già memorizzata nella cache del browser già, sparirà immediatamente.
L'utilizzo di questo per una pagina elenco dei prodotti.
Questo potrebbe non essere la più bella realizzazione ma funziona bene.
