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

Question

J'écris du Javascript pour redimensionner la grande image afin de 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" />

Y a-t-il un moyen pour moi de déterminer si la src image dans un img a été téléchargé ?

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

Pour l'instant, je vérifie simplement si la hauteur de la photo est inférieure à 150, et je suppose que si c'est le cas, il s'agit simplement du texte alt. Mais il s'agit là d'un bidouillage, qui ne fonctionnerait pas si la photo fait moins de 150 pixels de haut (ce qui est peu probable dans mon cas particulier), ou si le texte alt fait plus de 150 pixels de haut (ce qui pourrait se produire dans une petite fenêtre de navigateur).

---

Editar: Pour ceux qui veulent 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 ces suggestions. Il y a un risque que l'événement ne soit pas déclenché si je configure une fonction de rappel pour la fonction $("#photo").load J'ai donc défini un événement onLoad directement sur la balise image. Pour mémoire, voici le code que j'ai fini par adopter :

<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));
  }

});

Answer 1

Soit vous ajoutez un écouteur d'événements, soit l'image s'annonce d'elle-même avec onload. Puis 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" />

Answer 2

Utilisation de la magasin de données jquery vous pouvez définir un état "chargé".

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

Alors ailleurs, tu peux le faire :

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

Answer 3

La bonne réponse est d'utiliser événement.spécial.charge

Il est possible que l'événement load 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 load spécial qui se déclenche immédiatement si l'image est prête. event.special.load est actuellement disponible sous forme de plugin.

Selon les documents sur .load()

Answer 4

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 load handler ne se déclenchera pas. La meilleure solution est de faire comme Allain, mais de définir la src de l'image avec javascript après avoir attaché le gestionnaire de chargement. 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 src correct, attacher votre gestionnaire dom ready pour exécuter votre js : effacer le src de l'image (lui donner une taille et une hauteur fixes avec css pour éviter que la page ne scintille), puis définir votre gestionnaire de chargement img, puis réinitialiser le src au fichier correct. De cette façon, vous couvrez toutes les bases :)

Answer 5

Essayez quelque chose comme :

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