Обнаружение / перехват вставки <img>в DOM

Question

Мы используем сторонний скрипт аналитической отчетности, предоставленный этой аналитической компанией. Он добавляет изображение 1x1 пикселей в DOM с отчетными данными в URL-адресе изображения.

Можно ли как-нибудь контролировать DOM и перехватывать этот элемент <img> и изменять его атрибут "src" до того, как браузер запросит изображение?

Звучит как-то странно, я знаю, но есть функция, которую мы хотели бы взломать в этом сценарии отчетности (сценарий неясен).

Answer 1

В браузерах, отличных от IE, вы можете обнаружить вставку узла DOM с помощью события DOMNodeInserted. Я не знаю, сделал ли браузер запрос HTTP к моменту запуска события; Похоже, что не в Firefox из быстрого теста. Поскольку в IE это не работает, это может быть неприемлемым решением.

document.body.addEventListener("DOMNodeInserted", function(evt) {
    var node = evt.target;
    if (node.nodeType == 1 && node.tagName == "IMG") {
        node.src = "http://www.gravatar.com/avatar/be21766f09e0e5fd3a2f8cc721ceba2e?s=32&d=identicon&r=PG"; // Your gravatar
    }
}, false);

Answer 2

Если сторонний скрипт использует метод (например, .appendChild) для добавления элемента в документ, вы, вероятно, можете сделать это, заменив этот метод соответствующего объекта своей собственной функцией.

Это дает преимущество работы во всех браузерах, и я думаю, что вы сгенерируете только один HTTP-запрос (для измененного URL-адреса, а не для исходного).

Answer 3

Дайте это.Я не знаю, насколько это будет полезно, но я чувствовал, что переделываю, и это в некоторой степени объясняет сценарий, в соответствии с которым третья сторона намеренно включает задержку:

$(document).ready(function() {
// match an image with specific dimension, return it
function imgNinja() {
    var $img =  $("img").filter(function() {
        return ($(this).height() == 1 && $(this).width() == 1);
    });
    return $img;
}

// periodically execute this to check for matches
function keepSeeking() {
    $img = imgNinja();
    if($img.length) {
        alert('found it');
        clearInterval(i);
        // do something with image
    }
}

// insert a fake into the DOM at a bit of an interval
function addNastyImage() {
   var $invader = $('<img src="foo.jpg" height="1px" width="1px"/>'); 
    $('html').append($invader);
}


setTimeout(addNastyImage, 5000);
var i = setInterval(keepSeeking, 1000);
});

Демо: http://jsfiddle.net/NyEdE/3/

Answer 4

Опираясь на то, что предложил Адам:

$(document).ready(function() {
  $("img[src='http://example.com/example.gif']").attr('src','http://example.com/new_src.gif');
});