Событие пожара, когда изменен img src

Question

У меня есть изображение, которое изменяется, когда пользователь нажимает на другое миниатюру.

Как я могу надежно получить размеры изображения, которое должно быть загружено?

В настоящее время у меня есть:

$('#mainImg').animate({opacity: 0.01}, 500, function() { 
    $('#mainImg').attr('src', '/cakes/' + file); 
    setTimeout(function() { 
     center('#mainImg'); 
     $('#mainImg').animate({opacity: 1.00}, 500); 
    }, 100) 

}) 

Какая работа вокруг, что является немного более надежным, чем то, что я ранее имел:

$('#mainImg').fadeOut('fast', function(){ 
    $('#mainImg').attr('src', '/cakes/'+file); 
    center('#mainImg'); 
    $('#mainImg').fadeIn('fast'); 
}) 

Функция центра сейчас просто:

function center(imageElement) 
{ 
    var ph = $(imageElement).parent().height(); 
    var pw = $(imageElement).parent().width(); 

    var ih = $(imageElement).height(); 
    var iw = $(imageElement).width(); 
    alert(iw) 
} 

Answer 1

Прежде всего, вы должны предварительно загрузить изображение, чтобы иметь надежные размеры. Попробуйте что-то вроде этого:

$('#mainImg').animate({opacity: 0.01}, 500, function() { 
    var $this = $(this), 
     src = '/cakes/' + file; 
    preloadImage(src, function() { 
     $this.attr('src', src); 
     center($this); 
     $this.animate({opacity: 1.00}, 500); 
    }); 
}); 

preloadImage(src, callback) { 
    var img = new Image(); 
    img.onload = callback; 
    img.src = src; 
} 

изменить Также center функцию использовать уже имеющиеся в кэше переменную:

function center($imageElement) { 
    var ih = $imageElement[0].height; 
    var iw = $imageElement[0].width; 
    alert(iw) 
} 

Answer 2

Я думаю, вы должны предварительно загрузить этот образ, что-то вроде этого:

var image = new Image(); 
    image.src = "https://www.google.nl/images/srpr/logo11w.png"; 
    image.onload = function() { 
     // Do whatever you want with this.width and this.height overhere. 
     console.log(this.width); 
     console.log(this.height); 
    } 

Answer 3

Simular к уже опубликованным ответам, но с резервным для браузеров, которые не поддерживают событие загрузки для изображений правильно:

$('#mainImg').animate({opacity: 0.01}, 500, function() { 
    // run the load event only once 
    $('#mainImg').one('load', function() { 
     // do whatever you want to do if image is loaded... 
     console.log(this.width); 
     console.log(this.height); 
    }) 
    .attr('src', '/cakes/' + file); 
    .each(function() { 
     //Cache fix for browsers that don't trigger .load() 
     if(this.complete) $(this).trigger('load'); 
    }); 
})