jQuery在src更改之后和fadeIn之前获取img宽度

Question

我在 jQuery 和我正在构建的自定义照片库方面遇到了很大的问题。我搜索了高低，并尝试了无数不同的解决方案，但没有一个能完美运行。所以让我介绍一下信息：

此照片库左侧有缩略图，中间有一张大图。每个缩略图都可以被点击，它调用一个传入其 ID 的函数。我想要它做的是，AJAX POST 到服务器以获取图像评论和图像名称。淡出当前大图div，切换img标签中的src，获取新图片的宽度，设置叠加评论div的宽度，淡入大图div。

问题是我无法获得新图像加载后的宽度（即使使用 .load() 的形式等待图像完成加载）。现在，当我淡入新图像然后获取宽度时，我可以让它工作，但这不是我需要的。我需要在淡入之前获取宽度并设置 div 的宽度。

任何想法或更正都会很棒，希望我提供了足够的信息。

这是我正在努力的代码：

function thumbClick(val) {
    $.post('ajax.php', {
        photo_in: val
    }, function (data) {
        $('div#picture').fadeOut('slow', function () {

            //$('img#big-picture').load(function(){
            $('img#big-picture').one('load', function () {

                //alert($('img#big-picture').width());
                //will alert 0
                $('div#picture').fadeIn('slow', function () {
                    $('div#comment-box').width($('img#big-picture').width());
                    //set comment to what I want
                    $('p#comment').html("");
                    //alert($('img#big-picture').width());
                    //will alert new image width after FadeIN
                    $('p#comment').html(data.comment);
                });

            }); //end of one(load)
            $('img#big-picture').attr("src", data.newImage);


        }); //end of fadeout
    }, "json"); //end of post
}

Answer 1

我以前遇到过这种情况；似乎最简单的解决方案是快速显示图像，抓住它的宽度，然后再次隐藏它。此操作发生得如此之快，用户永远不会注意到。 在你的情况下，我相信代码是：

$("#big-picture").show();
alert($('#big-picture').width()); //this should be the real width, now
$("#big-picture").hide();

Answer 2

宽度为零，因为隐藏元素（具有display: none 的元素根据定义具有零高度和宽度）。在fadeOut() 之后，jQuery 隐藏元素。几种不同的解决方案：

使用.fadeTo()，而不是.fadeOut()：

$('#picture').fadeTo('slow', 0, function () {
    var $pic = $(this);

    $('#big-picture').one('load', function () {

        var $bigPic = $(this);

        $pic.fadeIn('slow', function () {
            $('#comment-box').width($bigPic.width());
            $('#comment').html(data.comment);
        });

    }).attr('src', data.newImage);
});

使用分隔符<img> 元素：

$('#picture').fadeOut('slow', function () {
    var $pic = $(this);

    $('#big-picture').one('load', function () {

        var img = new Image(),
            width;

        img.src = this.src;
        width = img.width;

        $pic.fadeIn('slow', function () {
            $('#comment-box').width(width);
            $('#comment').html(data.comment);
        });

    }).attr('src', data.newImage);
});

使用“偏左”技术：

CSS

.off-left {
    position: absolute;
    left: -99999px;
}

JavaScript

$('#picture').fadeOut('slow', function () {
    var $pic = $(this);

    $('#big-picture').one('load', function () {

        var $this = $(this),
            width = $this.addClass('off-left').show().width();

        $this.removeClass('off-left').hide();

        $('#picture').fadeIn('slow', function () {
            $('#comment-box').width(width);
            $('#comment').html(data.comment);
        });

    }).attr('src', data.newImage);
});

---

注意事项

• 使用 ID 选择器时，没有必要进一步限定选择器，因为元素 ID 必须是唯一的。
• 选择一种引用风格并始终如一地使用它。避免混合使用单引号和双引号作为字符串分隔符。

Answer 3

您应该能够将 CSS 属性 visibility 设置为 hidden 然后获取宽度，因为 visibility 不会将其从文档流中移除（如 display: none），而只是使其无形的。只需确保在淡入时将visibility 属性设置回visible。