javascript - img src更改时触发事件

我的图像在用户单击其他缩略图时会发生变化。

如何使它可靠地获取将要加载的图像的尺寸？

目前我有：

$('#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)
}

最佳答案

您应该先预加载图像以具有可靠的尺寸。尝试这样的事情：

$('#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)
}

关于javascript - img src更改时触发事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21495794/