Jquery callback при загрузке изображения при изменении src

Я меняю img src, как только я загрузил json файл, все это прекрасно работает. Но я хочу убедиться, что изображение полностью загружено. Что я могу сделать, используя:

     .one("load",function(){ 
                alert("image has load yay");
            });

Но после чтения различных сообщений, которые не все браузеры запускают загрузку, если изображение находится в кеше. Похоже, я не понимаю эту проблему в браузере, которая призвана вызвать эту проблему. Но я тестировал только FF (6.0.2), Chrome (13.0.7) и Safari (5.0.5) на mac. Теперь я уверен, что у IE должна быть проблема, и это связано только с ПК. У меня запущены довольно свежие версии браузеров, поэтому в них теперь что-то изменилось, и теперь возникает пожар. Или моя другая мысль заключается в том, что я запускаю последнюю версию jquery (1.6.3).. Была изменена?

Я надеюсь, что все это будет связано с запуском последнего jquery, но если нет, и это более старая проблема с браузером, тогда мне нужно исправить ошибку. Я попробовал пару решений на этом сайте, например: jQuery загрузка изображений с полным обратным вызовом А также некоторые комментарии на странице .load api: http://api.jquery.com/load-event/#comment-30211903

Но я не могу заставить их работать. Первый не работает вообще, а второй, похоже, падает на .each().

Это код, который до сих пор работает нормально, но не может быть уверен, что, возможно, более старые проблемы браузера.

$.getJSON(jsonURL, function(json) {         
    $("a.imgZoom img").attr("src", json[imageID].largeImage).one("load",function(){ 
         alert("the image has loaded");
    //do something here
    });
$("a.imgZoom").attr("href", json[imageID].largeImage);
})

Заранее благодарим за помощь.

В

Ответы

Ответ 1

Основываясь на некоторых тестах, которые я провел около года назад, я не нашел надежного способа получить событие загрузки при изменении .src изображения с одного значения на другое. Таким образом, мне пришлось прибегать к загрузке нового изображения и замене того, что у меня было с новым, когда загружалось новое изображение. Этот код успешно работает на нескольких сотнях веб-сайтов (он используется слайд-шоу) примерно через год, поэтому я знаю, что он работает.

Если вы установите обработчик нагрузки, прежде чем вы установите свойство .src на новом изображении, вы надежно получите событие загрузки. Здесь некоторый код, который я написал ранее ранее для захвата события загрузки: jQuery: как проверить, загружены ли все изображения в массиве?.

Этот код, который прикрепляет обработчик событий до тех пор, как .src работает для меня в современных браузерах, в которых я его пробовал (я не тестировал старые браузеры):

    $("img").one("load", function() {
        // image loaded here
    }).attr("src", url);

Вы можете увидеть, как он работает здесь: http://jsfiddle.net/jfriend00/hmP5M/, и вы можете протестировать любые браузеры, которые хотите использовать, с помощью jsFiddle. Просто нажмите на изображение, чтобы загрузить его. Он циклически проходит три разных изображения (каждый раз устанавливая .src), каждый раз загружая два из них каждый раз (никогда из кеша) и один из кеша, чтобы проверить оба случая. Он выдает сообщение msg на экран всякий раз, когда вызывается обработчик .load, чтобы вы могли видеть, вызвал ли он.