web-dev-qa-db-fra.com

Fade in images après qu'ils ont chargé

J'ai trouvé ce code pour obtenir l'effet désiré et l'ai essayé sur JSFiddle

http://jsfiddle.net/AndyMP/7F9tY/366/

Cela semble fonctionner en ce sens que l'image s'estompe après son chargement. Ensuite, je l'ai essayée dans une page Web et cela n'a pas fonctionné de la même manière, en chargeant d'abord l'image plutôt qu'en la fondant en fondu. Même si parfois, il semblait que l'image apparaissait en même temps qu'elle était chargée.

Existe-t-il un moyen plus fiable d'y parvenir, de préférence en modifiant ce code si possible?

$("#image").ready(function(){ $("#preload").fadeIn(1000); });

jqueryimageload
11
Andy

Le seul moyen fiable de fadeIn() une image qui se trouve dans votre balise HTML consiste à définir un gestionnaire onload dans la balise HTML comme suit:

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

Démo de travail ici: http://jsfiddle.net/jfriend00/X82zY/

Faire ainsi, vous n’avez pas besoin de donner à chaque image un identifiant ou une classe. Il suffit de définir le style et le gestionnaire d'événements dans le balisage.

La raison pour laquelle vous devez placer le gestionnaire d'événements dans le balisage est que si vous attendez que JavaScript s'exécute sur votre page, il est peut-être trop tard. L'image est peut-être déjà chargée (en particulier si elle se trouve dans la mémoire cache du navigateur) et vous avez peut-être manqué l'événement onload. Si vous placez le gestionnaire dans le balisage HTML, vous ne manquerez pas l'événement onload car le gestionnaire est attribué avant le chargement de l'image.

Si vous ne souhaitez pas placer de gestionnaires d'événements dans le javascript, vous pouvez faire quelque chose comme ceci: vous utilisez un espace réservé pour l'image dans le code HTML réel et vous utilisez le javascript pour créer les balises d'image réelles et les insérer et extraire l'image URL de l'espace réservé:

<div>
    <span class="fadeIn" data-src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

Démo de travail: http://jsfiddle.net/jfriend00/BNFqM/

La première option accélère le chargement de vos images (car le chargement des images commence immédiatement après l'analyse de la page), mais la deuxième option vous donne un contrôle plus programmatique du processus.

37
jfriend00

Script Java pur et solution CSS:

Utiliser l'effet de transition avec opactiy.

let images = document.getElementsByTagName("img");
for (let image of images) {
  image.addEventListener("load", fadeImg);
  image.style.opacity = "0";
}

function fadeImg() {
  this.style.transition = "opacity 2s";
  this.style.opacity = "1";
}
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">

4
Robbendebiene

Peut-être intéressant pour les personnes qui trouvent cette question et utilisent angular.js:

J'ai écrit une petite directive qui fait très bien le travail.

JS:

.directive('imgFadeInOnload', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attr) {
        element.css('opacity', 0);
        element.css('-moz-transition', 'opacity 2s');
        element.css('-webkit-transition', 'opacity 2s');
        element.css('-o-transition', 'opacity 2s');
        element.css('transition', 'opacity 2s');
        element.bind("load", function () {
          element.css('opacity', 1);
        });
        element.attr('src', attr.imgFadeInOnload);
      }
    };
  });

HTML: 

<img img-fade-in-onload="{{imgSrc}}" src="">

En définissant src non pas dans le code HTML mais dans le code de la directive, le problème mentionné par jfriend00 (le gestionnaire est attaché après le déclenchement de la onload).

4
Felix Engelmann

html

<div id="image">
    <img id="preload" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

javascript

.ready () ne se déclenche pas comme vous le pensez, voir le gestionnaire d'événements 'load' jQuery

$("#preload").load(function(evt){
      $(this).fadeIn(1000);
});
4
DefyGravity

fadeIn devrait être appelé après le chargement de l'image. Voici un exemple: http://jsfiddle.net/mYYym/

1
stewe

Voici une solution de transition css et javascript basée sur la réponse de @ jfriend00 et similaire à celle de @Robbendebiene:

  • fournit des substitutions pour afficher l'image si js est désactivé
  • seulement le bit de javascript en ligne est requis onload="this.style.opacity=1"
  • toute l'animation est en CSS, pas besoin de jQuery ou de javascript complexe

img.fadein {
  opacity: 1;  /* fallback in case of no js */
  transition: opacity 500ms ease;
  max-width: 100%;
  height: auto;
}
.js img.fadein {
  opacity: 0; /* start with hidden image if we have js */
}
<!-- use moderinr to provide the "js" class on the html element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">

0
squarecandy