Есть ли способ привязать событие load () изображения после изменения его src?

Question

У меня есть изображение <img id='my_img' src='img1.png'> и кнопка.Нажатие на кнопку делает следующее:

$('#my_img').attr('src','img2.png')

Это второе изображение (img2.png) достаточно большое, и я хочу знать, когда оно будет полностью загружено (т.е. событие .load ()).Я пытался использовать .live, .bind и .complete, но ни одна из них не сработала.

Есть идеи?

Спасибо!Amit

Answer 1

Я думаю, что событие загрузки срабатывает только один раз для каждого тега img.Но вы можете легко создать новое изображение и загрузить его с помощью нового обработчика загрузки.

var img = new Image();
img.onload = function() {
  $('#my_img').attr('src', img.src);
};
img.src = 'img2.png';

После загрузки вы можете установить src изображения на вашей странице, и он будет мгновенно извлекаться из кэша браузера..

Answer 2

Вы можете сделать это:

$('<img id="myimg" src="1.png" /><a href="" id="clickme">click</a>').appendTo('body');

$('#clickme').click(function() {
    // replace the old img with a new one and define onLoad for the new img
    var newImg = $('<img />')
        .bind('load', function() {
            alert('2nd img loaded');
        })
        .attr('src', '2.png');
    $('#myimg').replaceWith(newImg);
    return false;
});