Est-ce que des bouillonnements sont disponibles pour les événements de chargement d'image?

Puis-je utiliser:

window.addEventListner(); 

en quelque sorte.

  • Comment puis-je ajouter une classe à un élément donné?
  • Comment imprimer le graphique flot
  • Quelle est la meilleure méthode pour redistribuer une page Web sur le changement d'orientation?
  • Le routage et les chemins ASP.NET MVC sont des fichiers js
  • Comment définir des variables javascript à l'aide de MVC4 avec Razor
  • Faire une demande AJAX à un autre serveur
  • Toutes mes images ont un display = 'none' .

    Une fois l'image chargée,

    Je souhaite définir display = 'inline'

    De cette façon, je peux normaliser ce qui s'affiche pendant que l'image est en cours de téléchargement.

    Dans ce cas, je ne peux pas précharger mes images.

  • Recevez la semaine du mois
  • Ng-model ne se met plus à jour après avoir saisi l'entrée de texte
  • Parsing city / state à partir de la demande Google Maps
  • Javascript classe hériter de classe de fonction
  • JS angulaire: obtenez ng-model sur ng-change
  • Phantomjs n'attend pas la charge de page "pleine"
  • 5 Solutions collect form web for “Est-ce que des bouillonnements sont disponibles pour les événements de chargement d'image?”

    L'événement load / onload ne fait pas de bulle ( référence , référence ), donc ce que vous demandez n'est pas possible. Vous devrez joindre un gestionnaire d'événements à chaque nœud d'image.

    Utilisez l' enregistreur d' événement de capture sur un autre noeud DOM autre que la window ( body ou autre parent d'éléments d'image d'intérêt):

     document.body.addEventListener( 'load', function(event){ var tgt = event.target; if( tgt.tagName == 'IMG'){ tgt.style.display = 'inline'; } }, true // <-- useCapture ) 

    Avec cela, vous ne devez pas (re) attacher les gestionnaires d'événements en itérant via document.images .

    Et cela fonctionnera également pour les images insérées dynamiquement.

    La même chose est vraie pour l' error l'image lors du chargement des événements. MDN: addEventListener

     Array.prototype.forEach.call(document.querySelectorAll('img'), function (elem) { elem.addEventListener('load', function () { this.style.display = 'inline'; }); if (elem.complete) { elem.style.display = 'inline'; } }); 

    L'événement "charge" ne déclenchera pas si l'image est déjà chargée; Ainsi, nous vérifions si la version complete est déjà définie.

     $('img').on('load', function() { $(this).show() }) 

    Sans bibliothèques:

     window.onload = function() { var imgs = document.querySelectorAll('img') imgs.onload = function() { this.style.display = 'inline'; } } 

    Vous pouvez utiliser le Image.onload événements Image.onload , mais il n'y a pas de bulle impliqué.

     var i = new Image; i.onload = function() { this.style.display = 'block'; } 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.