Comment puis-je déterminer si une image a été chargée, en utilisant Javascript / jQuery?

J'écris du Javascript pour redimensionner la grande image pour l'adapter à la fenêtre du navigateur de l'utilisateur. (Je ne contrôle malheureusement pas la taille des images sources.)

Donc, quelque chose comme ça serait dans le HTML:

<img id="photo"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Existe-t-il un moyen pour moi de déterminer si l' srcimage d'une imgbalise a été téléchargée?

J'en ai besoin car je rencontre un problème s'il $(document).ready()est exécuté avant que le navigateur n'ait chargé l'image. $("#photo").width()et $("#photo").height()renverra la taille de l'espace réservé (le texte alternatif). Dans mon cas, c'est quelque chose comme 134 x 20.

Pour le moment, je vérifie simplement si la hauteur de la photo est inférieure à 150 et en supposant que si c'est le cas, il ne s'agit que d'un texte alternatif. Mais c'est tout un hack, et cela se casserait si une photo mesure moins de 150 pixels de haut (ce qui n'est probablement pas le cas dans mon cas particulier), ou si le texte alternatif mesure plus de 150 pixels de haut (cela pourrait éventuellement se produire sur une petite fenêtre de navigateur) .

Edit: Pour tous ceux qui souhaitent voir le code:

$(function()
{
  var REAL_WIDTH = $("#photo").width();
  var REAL_HEIGHT = $("#photo").height();

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(REAL_HEIGHT < 150)
    {
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
      if(REAL_HEIGHT < 150)
      {
        //image not loaded.. try again in a quarter-second
        setTimeout(adjust_photo_size, 250);
        return;
      }
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Mise à jour : Merci pour les suggestions. Il y a un risque que l'événement ne soit pas déclenché si je définis un rappel pour l' $("#photo").loadévénement, j'ai donc défini un événement onLoad directement sur la balise image. Pour mémoire, voici le code avec lequel j'ai fini par aller:

<img id="photo"
     onload="photoLoaded();"
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Puis en Javascript:

//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
  isPhotoLoaded = true;
}

$(function()
{
  //Hides scrollbars, so we can resize properly.  Set with JS instead of
  //  CSS so that page doesn't break with JS disabled.
  $("body").css("overflow", "hidden");

  var REAL_WIDTH = -1;
  var REAL_HEIGHT = -1;

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()
  {
    if(!isPhotoLoaded)
    {
      //image not loaded.. try again in a quarter-second
      setTimeout(adjust_photo_size, 250);
      return;
    }
    else if(REAL_WIDTH < 0)
    {
      //first time in this function since photo loaded
      REAL_WIDTH = $("#photo").width();
      REAL_HEIGHT = $("#photo").height();
    }

    var new_width = . . . ;
    var new_height = . . . ;

    $("#photo").width(Math.round(new_width));
    $("#photo").height(Math.round(new_height));
  }

});

Ajoutez un écouteur d'événement ou demandez à l'image de s'annoncer avec onload. Ensuite, déterminez les dimensions à partir de là.

<img id="photo"
     onload='loaded(this.id)'
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

En utilisant le magasin de données jquery, vous pouvez définir un état «chargé».

<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />

Ensuite, vous pouvez faire ailleurs:

if ($('#myimage').data('loaded')) {
    // loaded, so do stuff
}

La bonne réponse est d'utiliser event.special.load

Il est possible que l'événement de chargement ne soit pas déclenché si l'image est chargée à partir du cache du navigateur. Pour tenir compte de cette possibilité, nous pouvons utiliser un événement de chargement spécial qui se déclenche immédiatement si l'image est prête. event.special.load est actuellement disponible en tant que plugin.

Par la documentation sur .load ()

Vous voulez faire ce qu'Allain a dit, mais sachez que parfois l'image se charge avant que dom ready, ce qui signifie que votre gestionnaire de charge ne se déclenchera pas. Le meilleur moyen est de faire comme le dit Allain, mais définissez le src de l'image avec javascript après avoir attaché le load hander. De cette façon, vous pouvez garantir qu'il se déclenche.

En termes d'accessibilité, votre site fonctionnera-t-il toujours pour les personnes sans javascript? Vous pouvez donner à la balise img le bon src, attacher votre gestionnaire prêt pour exécuter votre js: effacez l'image src (donnez-lui une hauteur fixe avec et une hauteur avec css pour empêcher le scintillement de la page), puis définissez votre gestionnaire de chargement img, puis réinitialisez le src sur le fichier correct. De cette façon, vous couvrez toutes les bases :)

Selon l'un des commentaires récents à votre question initiale

$(function() {

  $(window).resize(adjust_photo_size);
  adjust_photo_size();

  function adjust_photo_size()  {
    if (!$("#photo").get(0).complete) {
       $("#photo").load(function() {
          adjust_photo_size();
       });
    } else {
      ... 
    }
});

Avertissement Cette réponse pourrait provoquer une boucle sérieuse dans ie8 et les versions antérieures, car img.complete n'est pas toujours correctement paramétré par le navigateur. Si vous devez prendre en charge ie8, utilisez un indicateur pour vous rappeler que l'image est chargée.

Essayez quelque chose comme:

$("#photo").load(function() {
    alert("Hello from Image");
});

Il existe un plugin jQuery appelé "imagesLoaded" qui fournit une méthode compatible avec tous les navigateurs pour vérifier si l'image ou les images d'un élément ont été chargées.

Site: https://github.com/desandro/imagesloaded/

Utilisation pour un conteneur contenant de nombreuses images:

$('container').imagesLoaded(function(){
 console.log("I loaded!");
})

Le plugin est génial:

1. fonctionne pour vérifier un conteneur avec de nombreuses images à l'intérieur
2. fonctionne pour vérifier une image pour voir si elle a été chargée

Des commentaires sur celui-ci?

...

doShow = function(){
  if($('#img_id').attr('complete')){
    alert('Image is loaded!');
  } else {
    window.setTimeout('doShow()',100);
  }
};

$('#img_id').attr('src','image.jpg');

doShow();

...

On dirait que ça marche partout ...

Je viens de créer une fonction jQuery pour charger une image à l'aide de jQuerys Deferred Object, ce qui permet de réagir très facilement à un événement de chargement / erreur:

$.fn.extend({
    loadImg: function(url, timeout) {
        // init deferred object
        var defer = $.Deferred(),
            $img = this,
            img = $img.get(0),
            timer = null;

        // define load and error events BEFORE setting the src
        // otherwise IE might fire the event before listening to it
        $img.load(function(e) {
            var that = this;
            // defer this check in order to let IE catch the right image size
            window.setTimeout(function() {
                // make sure the width and height are > 0
                ((that.width > 0 && that.height > 0) ? 
                    defer.resolveWith : 
                    defer.rejectWith)($img);
            }, 1);
        }).error(function(e) {
            defer.rejectWith($img);
        });

        // start loading the image
        img.src = url;

        // check if it's already in the cache
        if (img.complete) {
            defer.resolveWith($img);
        } else if (0 !== timeout) {
            // add a timeout, by default 15 seconds
            timer = window.setTimeout(function() {
                defer.rejectWith($img);
            }, timeout || 15000);
        }

        // return the promise of the deferred object
        return defer.promise().always(function() {
            // stop the timeout timer
            window.clearTimeout(timer);
            timer = null;
            // unbind the load and error event
            this.off("load error");
        });
    }
});

Usage:

var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png')
.done(function() {
    alert('image loaded');
    $('body').append(this);
}).fail(function(){
    alert('image failed');
});

Voyez-le fonctionner sur: http://jsfiddle.net/roberkules/AdWZj/

Cette fonction vérifie si une image est chargée en fonction de ses dimensions mesurables. Cette technique est utile si votre script s'exécute après que certaines des images ont déjà été chargées.

imageLoaded = function(node) {
    var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth;
    var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight;
    return w+h > 0 ? true : false;
};

J'ai trouvé que cela fonctionnait pour moi

document.querySelector("img").addEventListener("load", function() { alert('onload!'); });

Le mérite revient entièrement à Frank Schwieterman, qui a commenté la réponse acceptée. J'ai dû mettre ça ici, c'est trop précieux ...

Nous avons développé une page où il a chargé un certain nombre d'images et ensuite effectué d'autres fonctions seulement après le chargement de l'image. C'était un site très fréquenté qui générait beaucoup de trafic. Il semble que le script simple suivant a fonctionné sur pratiquement tous les navigateurs:

$(elem).onload = function() {
    doSomething();
}

MAIS CECI EST UN PROBLÈME POTENTIEL POUR IE9!

Le SEUL navigateur sur lequel nous avons signalé des problèmes est IE9. Ne sommes-nous pas surpris? Il semble que la meilleure façon de résoudre le problème est de ne pas attribuer de src à l'image avant que la fonction de chargement n'ait été définie, comme ceci:

$(elem).onload = function() {
    doSomething();
}
$(elem).attr('src','theimage.png');

Il semble qu'IE 9 ne lancera parfois pas l' onloadévénement pour une raison quelconque. D'autres solutions sur cette page (comme celle d'Evan Carroll, par exemple) ne fonctionnaient toujours pas. Logiquement, cela vérifiait si l'état de chargement était déjà réussi et déclenchait la fonction et si ce n'était pas le cas, définissez le gestionnaire de chargement, mais même lorsque vous faites cela, nous avons démontré en testant que l'image pouvait se charger entre ces deux lignes de js. apparaissant non chargé sur la première ligne, puis chargement avant que le gestionnaire de chargement ne soit défini.

Nous avons constaté que la meilleure façon d'obtenir ce que vous voulez est de ne pas définir le src de l'image tant que vous n'avez pas défini le onloaddéclencheur d'événement.

Nous avons récemment arrêté de prendre en charge IE8, donc je ne peux pas parler des versions antérieures à IE9, sinon, sur tous les autres navigateurs utilisés sur le site - IE10 et 11 ainsi que Firefox, Chrome, Opera, Safari et autres les navigateurs mobiles utilisaient - définir le srcavant d'attribuer le onloadgestionnaire n'était même pas un problème.

Puis-je suggérer une solution CSS pure?

Ayez juste une Div dans laquelle vous voulez montrer l'image. Définissez l'image comme arrière-plan. Alors ayez la propriété background-size: coverou background-size: containselon la façon dont vous la voulez.

coverrecadrera l'image jusqu'à ce que les petits côtés recouvrent la boîte. containgardera l'image entière à l'intérieur du div, vous laissant des espaces sur les côtés.

Consultez l'extrait ci-dessous.

div {
  height: 300px;
  width: 300px;
  border: 3px dashed grey;
  background-position: center;
  background-repeat: no-repeat;
}

.cover-image {
  background-size: cover;
}

.contain-image {
  background-size: contain;
}

<div class="cover-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>
<br/>
<div class="contain-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>

Je trouve que cette solution simple fonctionne le mieux pour moi:

        function setEqualHeight(a, b) {
            if (!$(a).height()) {
                return window.setTimeout(function(){ setEqualHeight(a, b); }, 1000);
            }
            $(b).height($(a).height());
        }

        $(document).ready(function() {
            setEqualHeight('#image', '#description');
            $(window).resize(function(){setEqualHeight('#image', '#description')});
        });
    </script>