jQuery Comment obtenez-vous une image pour se fanent dans la charge?
https://stackoverflow.com/questions/1383870
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Tout ce que je veux faire est fondu mon logo sur le chargement de la page. Je suis nouveau aujourd'hui pour jQuery et je ne peux pas réussi à fadeIn la charge s'il vous plaît aider. Désolé si cette question a déjà répondu que j'ai eu un coup d'œil et essayer d'adapter d'autres réponses à la question différente, mais rien ne semble fonctionner et son départ pour me frustrer.
Merci.
Code:
<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>
La solution 13
Je figure la réponse! Vous devez utiliser la fonction window.onload comme indiqué ci-dessous. Merci à Guy Tec et Karim pour l'aide. Remarque: vous devez toujours utiliser le document fonction prêt aussi.
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
Il a également travaillé pour moi quand il est placé juste après l'image ... Merci
Autres conseils
Ce fil semble inutilement controversé.
Si vous voulez vraiment résoudre correctement cette question, en utilisant jQuery, s'il vous plaît voir la solution ci-dessous.
La question est « jQuery Comment obtenez-vous une image pour disparaître dans la charge? »
Tout d'abord, une note rapide.
Ce n'est pas un bon candidat pour $ (document) .ready ...
Pourquoi? Parce que le document est prêt lorsque le DOM HTML est chargé. L'image du logo ne sera pas prêt à ce moment - il peut encore être en cours de téléchargement, en fait,
Donc, pour répondre d'abord la question générale « jQuery Comment obtenez-vous une image pour disparaître dans la charge? » - l'image dans cet exemple a un id = "logo" attribut:
$("#logo").bind("load", function () { $(this).fadeIn(); });
fait exactement ce que la question demande. Une fois l'image chargée, il disparaîtra. Si vous changez la source de l'image, lorsque la nouvelle source a été chargé, il fondu.
Il y a un commentaire sur l'utilisation window.onload aux côtés de jQuery. Cela est tout à fait possible. Ça marche. Ça peut être fait. Cependant, l'événement window.onload a besoin d'un peu de soins particuliers. En effet, si vous utilisez plus d'une fois, vous écrasez vos événements précédents. Exemple (ne hésitez pas à essayer ...).
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Bien sûr, vous auriez pas trois événements onload si proches dans votre code. Vous avez probablement un script qui ne onload quelque chose, puis ajoutez votre gestionnaire de window.onload à disparaître dans l'image - « Pourquoi mon diaporama a cessé de travailler !!? » -. À cause du problème de window.onload
Une grande caractéristique de jQuery est que lorsque vous liez des événements en utilisant jQuery, tous sont ajoutés.
Donc là vous l'avez - la question a déjà été marquée comme une réponse, mais la réponse semble être insuffisante en fonction de tous les commentaires. J'espère que cela aide tous ceux qui arrivent de moteurs de recherche du monde!
Vous avez une erreur de syntaxe en ligne 5:
$('#logo').hide();.fadeIn(3000);
Devrait être:
$('#logo').hide().fadeIn(3000);
Il suffit de régler le style du logo display:hidden et appelez fadeIn, au lieu de la première vocation hide:
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
Pour faire cela avec plusieurs images dont vous avez besoin pour exécuter par une fonction .each(). Cela fonctionne, mais je ne sais pas comment il est efficace.
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
window.onload est pas digne de confiance .. J'utiliser:
<script type="text/javascript">
$(document).ready(function () {
$('#logo').hide().fadeIn(3000);
});
</script>
En utilisant les exemples de Sohnee et karim79. Je l'ai testé cela et cela a fonctionné dans les deux FF3.6 et 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 clé est d'utiliser $(window).load(function(){} donc nous savons que l'image est chargée. Masquer l'image via la fonction puis css fondu en utilisant fadeIn:
$(function() {
$(window).load(function(){
$('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
});
});
Idée de: http://www.getpeel.com/
Utilisation imagesloaded plugin Desandro
1 - masquer les images en css:
#content img {
display:none;
}
2 - fondu en images sur la charge avec javascript:
var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
$(image.img).fadeIn();
});
OK, donc je l'ai fait et cela fonctionne. Il est essentiellement piraté ensemble de différentes réponses ici. Comme il est STILL pas une claire réponse dans ce fil j'ai décidé de poster ce sujet.
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
Cela me semble être la meilleure façon de s'y prendre. Malgré les meilleures intentions de Sohnee il a omis de mentionner que l'objet doit d'abord être réglé sur display: none avec CSS. Le problème ici est que si pour une raison quelconque JS ne fonctionne pas l'objet de l'utilisateur ne vient jamais apparaître. Pas bon, surtout si elle est le frikin' logo.
Cette solution laisse l'élément seul dans le CSS, et les premières peaux, puis se fane dans tout en utilisant JS. De cette façon, si JS ne fonctionne pas correctement l'article sera simplement charger normalement.
L'espoir qui aide à quelqu'un d'autre qui trébuche dans ce google classé # 1 fil pas si utile.
Comme Söhne mentionne, mais j'ajouter ceci:
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
ou
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
J'ai essayé le suivant, mais ne fonctionne pas;
<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 suivante a travaillé très 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>
CSS3 + Solution jQuery
Je voulais une solution qui n'a pas employé l'effet de fondu de jQuery que cela provoque retard dans de nombreux appareils mobiles.
la réponse de Steve Fenton J'ai adapté une version de ce qui s'efface l'image avec la propriété de transition CSS3 et opacité. Cela prend également en compte le problème de la mise en cache du navigateur, dans ce cas, l'image ne sera pas affiché en utilisant CSS.
Voici mon code et violon travail :
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 Snippet
$(".fade-in-on-load").each(function(){
if (!this.complete) {
$(this).bind("load", function () {
$(this).css('opacity', '1');
});
} else {
$(this).css('opacity', '1');
}
});
Qu'est-ce qui se passe ici est l'image (ou tout autre élément) que vous voulez effacer quand il charge aura besoin d'avoir la classe .fade-in-on-load appliquée à l'avance. Cela lui attribuer une 0 opacité et affecter l'effet de transition, vous pouvez modifier la vitesse de fondu au goût du CSS.
Ensuite, la JS cherchera chaque élément qui a la classe et de lier l'événement de charge à elle. Une fois fait, l'opacité est réglée sur 1, et l'image se fanent. Si l'image a déjà été stocké dans le cache du navigateur déjà, il disparaîtra immédiatement.
L'utilisation de ce pour une page d'inscription du produit.
Cela peut ne pas être la plus jolie mise en œuvre, mais il ne fonctionne.
