javascript - 当 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)
}