Запускайте функцию каждый раз, когда изображения заканчивают загружаться

Question

Я хотел знать, как использовать JQuery для создания функции, которая будет запускаться при каждом завершении загрузки изображения.Я хочу, чтобы эта функция называлась КАЖДЫЙ ВРЕМЯ, а не только один раз.Так, если, например, у меня есть «image1.jpg», и он был загружен при запуске страницы, функция будет вызвана.Затем, если я изменю изображение и оно будет загружено снова после того, как я изменил его с помощью Javascript, я хочу, чтобы эта «загруженная» функция снова запускалась.Я пробовал использовать функцию Jquery Load (), но она запускается только один раз, а не второй раз после замены изображения на другое.

Я хочу также, чтобы даже было, даже если изображение тоже было кэшировано,Это означает, что каждый раз, когда я изменяю атрибут изображения w 'src', я хочу, чтобы определенная функция запускалась снова, даже если изображение уже было кэшировано.

Пример:

$("#myimageselector").attr("src", "http://domain.com/the_new_image.jpg");

Я хочу, чтобы, когда это произошло, даже если изображение уже было кэшировано, функция сработает.Я думаю, что можно узнать, были ли изображения кэшированы.Мне просто нужно иметь функцию .load (), которая будет запускаться один раз (конечно), и если она не была выполнена, это означает, что изображение было кэшировано.По крайней мере, для моего конкретного использования.

Мысль: может быть, нам следует связать событие, которое проверило изменение в DOM для конкретного изменения элемента.Так что, возможно, если изображение было загружено, определенный элемент DOM изменяется, поэтому мы можем проверить значения до и после.

Спасибо.

Answer 1

Самое близкое, что я получаю к вашему желаемому решению, это также касается кэшированных изображений.
Я создал плагин jQuery:

(function($){
    var dummy_img = "dummy1x1.png",
        dummy_width = 1,
        dummy_height = 1;

    $("<img>").attr("src", dummy_img); //Preload image

    $.fn.setSrc = function(src, func, args){
        var $img = this;
        if(/img/i.test(this.get(0).tagName)) return; //Cancel at non-IMG elements
        if(!(args instanceof Array)) args = [];
        var poller = window.setInterval(function(){
            if($img.height() != dummy_height || $img.width() != dummy_width){
                loaded();
            }
        }, 200);
        $img.attr("src", dummy_img);
        $img.bind("load", loaded);
        $img.bind("error", clearPoller);
        function loaded(){
            clearPoller();
            //If a callback function exists, execute it
            if(typeof func == "function") func.apply($img,args);

            func = null;//Prevent unwanted executions
        }
        function clearPoller(){
            window.clearInterval(poller);
        }
    }
})(jQuery);

Использование:

$("#myImg").setSrc("image.png", function(){
    alert(this.attr("src") + " has loaded!");
});

Концепция этого:

1. Изменить ширину и высоту на 1 (используя предварительно загруженное фиктивное изображение)
2. Bind load и error обработчики событий
3. Запустить программу проверки, которая проверяет ширину и высоту изображения.
4. Когда загрузка изображения завершится / не удалась, будет запущено событие load или error. После запуска программа очистки очищается, и переданная функция выполняется.
5. Когда ни одно из этих событий не запускается, устройство опроса все еще может обнаружить изменение размера изображения. Когда загруженное в кэш изображение загружается, ширина / высота элемента обновляется, что обнаруживается средством проверки. В этом случае устройство очистки очищает интервал и выполняет переданную функцию.

Answer 2

вы можете использовать функцию onLoad для тега Img

$(".img").load(function (){
    // do something
});

Answer 3

Это будет работать независимо от того, кэшировано ли изображение:

$(document).ready(function() {
    var imgLoadFunc = function() {
        //code to run
    };

    $("img").each( function() {
        if(this.complete) {
            imgLoadFunc.call(this);
        } else {
            $(this).load( function() {
                imgLoadFunc.call(this);
            });
        }
    });
});

Строго говоря, вам не нужно использовать call(), но это позволит вам использовать рассматриваемый элемент изображения более jquery-ish способом. Внутри imgLoadFunc:

var img = $(this);

Answer 4

$('img').live('load', function ()
{
    alert("image loaded: "+this.src);
});

Используйте метод jquery live для отслеживания загрузки.