Détecter une img src changement

Je suis d'essayer de détecter si la source de l'image est modifiée.

Dans mon cas, le src est modifié à partir de jquery, et je n'ai pas le droit de changer le fichier jquery.
Donc, im essayant de détecter la src changement à partir d'un élément img.

Je voudrais voir la source si la src est changé, juste pour le test de

C'est mon code actuel:

var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);

Sur la page de la charge de l'alerte réagir et me montre la src, mais pas sur un src changement de jquery

S'il vous plaît, lire stackoverflow.com/questions/4561845/...

OriginalL'auteur Sporting Gool | 2012-05-18

  1. 7

    DOMAttrModified pourrait fonctionner, aucune idée à ce sujet...mais onload fonctionne certainement très bien pour moi. Voici le violon avec la démo. http://jsfiddle.net/QVqhz/

    Presque 3 ans plus tard, mais cela fonctionne vraiment bien, merci!
    Selon developer.mozilla.org/en-US/docs/Web/Guide/Events/... cette méthode est obsolète et pourrait causer votre site en arrêt de travail depuis cette fonctionnalité a été supprimée de la norme.

    OriginalL'auteur Parth Thakkar

  2. 6

    Vous pourriez le faire, mais il ne serait pris en charge par les nouveaux navigateurs qui implémentent l' DOM mutation événements...

    divimg.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       //The `src` attribute changed!
    }
});

    OriginalL'auteur alex

  3. 5

    Chaque fois que le src attribut est modifié, le navigateur se déclenche immédiatement et de récupérer l'image. Une fois que l'image est renvoyée au navigateur le navigateur va déclencher l' loaded événement sur l'élément de l'image. Ainsi, vous pouvez contrôler efficacement src évolution en définissant un rappel sur cet événement. Vous pourriez faire quelque chose de similaire à l'exemple de code suivant.

    var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");

    OriginalL'auteur Joseph Moniz

  4. 1

    Analyse

    1. load événement est déclenché lorsque src attribut de <img /> est modifié ou mis

    2. Si l'utilisateur n'a pas écrit src attribut dans <img />, le navigateur va remplir src attribut automatiquement (comme données:image/png;base64,...) pour empêcher 204 Erreur. Ce sera également déclencher load événement.

    Conclusion

    1. Utiliser load événement, mais de vérifier si c'est de l'image par défaut ou non. (sans doute, l'image par défaut sera de 1 x 1 pixel)

      • Hypothèse - votre image est plus grande que 1 x 1 pixel

    la Solution

    $('img').load(function() {
    var imageObj = $(this);
    if (!(imageObj.width() == 1 && imageObj.height() == 1)) {
        console.log('Image source changed');
    }
});

    OriginalL'auteur Chemical Programmer

  5. 1
    var img = document.querySelector("#img_div img"),
observer = new MutationObserver((changes) => {
  changes.forEach(change => {
      if(change.attributeName.includes('src')){
        console.dir(img.src);
      }
  });
});
observer.observe(img, {attributes : true});
    Ce doit être la accepté de répondre, maintenant sa 2018 l'observateur de la méthode est le chemin à parcourir!

    OriginalL'auteur Dorian Andrés

  6. 0

    Je pense qu'il n'y a aucun évènement pour cela, vous pouvez créer votre propre "événement":

    var divimg = document.getElementById("img_div"),
    prevSrc;
setInterval(function() {
    if (divimg.src != prevSrc) {
        prevSrc = divimg.src;
        onSrcChange();
    }
}, 1000); //1000ms = 1s

function onSrcChange() {
    //do something
}
    Être conscient, cette solution sondages pour voir si le src attribut a changé toutes les 1 seconde. Qui semble très cher! Je ne crois pas une solution de vote est une bonne idée.

    OriginalL'auteur Wouter J