web-dev-qa-db-fra.com

jQuery Comment obtenir une image en fondu lors du chargement?

Tout ce que je veux faire, c'est fondre mon logo sur le chargement de la page. Je suis nouveau aujourd'hui sur jQuery et je n'arrive pas à fondre en charge s'il vous plaît aidez Désolé si cette question a déjà été répondue, j'ai jeté un œil et essayer d'adapter d'autres réponses à des questions différentes, mais rien ne semble fonctionner et cela commence à 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>
jqueryonloadfadein
23
Cool Hand Luke

Ce fil semble inutilement controversé.

Si vous voulez vraiment résoudre cette question correctement, en utilisant jQuery, veuillez voir la solution ci-dessous.

La question est "jQuery Comment obtenir une image en fondu lors du chargement?"

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ête à ce stade - elle peut être téléchargée en fait!

Donc, pour répondre d'abord à la question générale "jQuery Comment faire pour qu'une image apparaisse en charge?" - l'image dans cet exemple a un attribut id = "logo":

$("#logo").bind("load", function () { $(this).fadeIn(); });

Cela fait exactement ce que la question demande. Lorsque l'image est chargée, elle apparaît en fondu. Si vous changez la source de l'image, lorsque la nouvelle source est chargée, elle apparaît en fondu.

Il y a un commentaire sur l'utilisation de window.onload avec jQuery. C'est parfaitement possible. Ça marche. Ça peut être fait. Cependant, l'événement window.onload nécessite un soin particulier. En effet, si vous l'utilisez plusieurs fois, vous écrasez vos événements précédents. Exemple (n'hésitez pas à l'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 n'auriez pas trois événements de chargement si proches dans votre code. Vous auriez probablement un script qui fait quelque chose d'onload, puis ajoutez votre gestionnaire window.onload pour fondre dans votre image - "pourquoi mon diaporama a-t-il cessé de fonctionner !!?" - à cause du problème window.onload.

Une grande fonctionnalité de jQuery est que lorsque vous liez des événements à l'aide de jQuery, ils sont TOUS ajoutés.

Alors vous l'avez - la question a déjà été marquée comme répondue, mais la réponse semble insuffisante sur la base de tous les commentaires. J'espère que cela aidera toute personne arrivant des moteurs de recherche du monde!

48
Fenton

Vous avez une erreur de syntaxe à la ligne 5:

$('#logo').hide();.fadeIn(3000);

Devrait être:

$('#logo').hide().fadeIn(3000);
19
Traveling Tech Guy

Définissez simplement le style du logo sur display:hidden et appelez fadeIn, au lieu d'appeler d'abord hide:

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>
10
karim79

Pour ce faire avec plusieurs images, vous devez exécuter une fonction .each(). Cela fonctionne, mais je ne suis pas sûr de son efficacité.

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});
6
Craig

En utilisant les exemples de Sohnee et karim79. J'ai testé cela et cela a fonctionné à la fois dans 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"/>
4
Max

La clé est d'utiliser $(window).load(function(){} pour que nous sachions que l'image est chargée. Masquez l'image via la fonction css puis fondez-la en utilisant fadeIn:

$(function() {

  $(window).load(function(){
    $('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
  });

});

Idée de: http://www.getpeel.com/

4
BlissOfBeing

window.onload n'est pas si fiable .. J'utiliserais:

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
4
J. Hendrix

Utilisation de Desandro's imagesloaded plugin

1 - masquer les images dans css:

#content img { 
    display:none; 
}

2 - Fondu d'images en charge avec javascript:

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});
4
François Romain

OK donc j'ai fait ça et ça marche. Il est essentiellement piraté à partir de différentes réponses ici. Puisqu'il y a TOUJOURS pas une réponse claire dans ce fil, j'ai décidé de poster ceci.

<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 procéder. Malgré les meilleures intentions de Sohnee, il a omis de mentionner que l'objet doit d'abord être configuré pour s'afficher: aucun avec CSS. Le problème ici est que si, pour une raison quelconque, le JS de l'utilisateur ne fonctionne pas, l'objet n'apparaîtra jamais. Pas bon, surtout si c'est le logo frikin '.

Cette solution laisse l'élément seul dans le CSS, et le masque d'abord, puis le fade dans tout en utilisant JS. De cette façon, si JS ne fonctionne pas correctement, l'élément se chargera normalement.

J'espère que cela aidera toute autre personne qui tombe dans ce fil de discussion classé n ° 1 par Google.

3
user607972

Comme Sohne le mentionne, mais j'ajouterais ceci:

$("img").hide();

$("img").bind("load", function () { $(this).fadeIn(); });

ou:

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});
3
Victor S

J'ai essayé le suivant mais n'ai pas fonctionné;

    <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>

mais le suivant a très bien fonctionné;

<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>
2
tugberk

Solution CSS3 + jQuery

Je voulais une solution qui n'utilise PAS l'effet de fondu de jQuery car cela provoque un décalage dans de nombreux appareils mobiles.

Emprunt de réponse de Steve Fenton J'ai adapté une version de ceci qui atténue l'image avec la propriété de transition CSS3 et l'opacité. Cela prend également en compte le problème de la mise en cache du navigateur, auquel cas l'image n'apparaîtra pas en CSS.

Voici mon code et violon de 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;
}

Extrait jQuery 

$(".fade-in-on-load").each(function(){
    if (!this.complete) {
        $(this).bind("load", function () {
            $(this).css('opacity', '1');
        });
    } else {
        $(this).css('opacity', '1');
    }
});

Ce qui se passe ici, c'est l'image (ou tout élément) dans laquelle vous souhaitez effectuer un fondu lors du chargement devra avoir le .fade-in-on-load classe qui lui était appliquée au préalable. Cela lui attribuera une opacité de 0 et affectera l'effet de transition, vous pouvez modifier la vitesse de fondu à goûter dans le CSS.

Ensuite, le JS recherchera chaque élément qui a la classe et lui liera l'événement de chargement. Une fois cela fait, l'opacité sera définie sur 1 et l'image apparaîtra en fondu. Si l'image était déjà stockée dans le cache du navigateur, elle apparaîtra en fondu immédiatement.

Utiliser ceci pour une page de liste de produits.

Ce n'est peut-être pas la plus jolie implémentation mais cela fonctionne bien.

2
gillytech