Question

可能是一个简单的解决方案，但我被困住了，而且已经很晚了...... :)

$j('#thisImage').html('<img src="image.jpg" id="box" />');
var imgWidth = $j('#box').width();

当我执行console.log(imgWidth)时，它会返回0 ...

我很确定这是因为在.html(...)调用被触发之前width(...)没有完全完成。我已经使用缓存的图像对其进行了测试，它工作正常并且给我正确的图像宽度......但是那些没有缓存的是返回0.

所以我正在寻找一个好的解决方案，等待.html(...)来电完成，然后再转到.width(...)来电

非常感谢任何帮助。 THX！

更新1

使用下面的CMS答案...... （这可能有助于每个人理解我的困境）

如果我这样做：

var imgWidth = 0;

$j('<img src="image.jpg" id="box" />').appendTo("#thisImage").load(function() {
    imgWidth = $j('#box').width();

    //my first log
    console.log("Width 1: " + imgWidth);                
});             

//my second log
console.log("Width 2: " + imgWidth);

if (imgWidth > 100) {
    //do something
}

然后//my second log在//my first log之前返回，因为.load尚未完成...

因此我的if语句始终为false，因为imgWidth始终为0 ...

直到.load完成......但是为时已晚......

更新2：看看我看到了什么

使用Ryan答案的修改......

转到jsbin.com - ＆gt;从下拉菜单中包含“jquery” - ＆gt;在 Javascript选项卡中替换w /，然后单击输出选项卡

function loadImg(url, func) {
    var img = new Image();
    img.onload = func;
    img.src = url;
    return img;
}

$(document).ready(function() {
    var myWidth = 0;

    var myImg = loadImg("http://sstatic.net/so/img/logo.png", function() {
                    myWidth = $(this).width();
                    $('#hello').append("Show Me First: " + myWidth + "<br />");
                });


    $(myImg).appendTo("body");

    if(myWidth > 0) {
        $('#hello').append("Success!");    
    } else {
        $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />");
    }

});

Answer 1

尝试类似下面的代码：

function loadImg(url, func) {
    var img = new Image();
    img.onload = func;
    img.src = url;
    return img;
}

var myImg = loadImg("lulz.jpg", function() {
    console.log($j(this).width());
});

$j(myImg).appendTo("#thisImage");

这几乎可以做到以下几点：

将图像设置为在后台加载，并将其移至浏览器
允许jQuery继续构建DOM元素，追加它等等
我们的自定义loadImg函数接受在图像准备就绪时触发的回调函数

当然，不用说你想在DOM准备好之后这样做，所以document.ready是你的朋友和所有爵士乐。玩得开心。 ; d

编辑，以响应OP的修改：

您的代码如下：

function loadImg(url, func) {
    var img = new Image();
    img.onload = func;
    img.src = url;
    return img;
}

$(document).ready(function() {
    var myWidth = 0;

    var myImg = loadImg("http://sstatic.net/so/img/logo.png", function() {
                    myWidth = $(this).width();
                    $('#hello').append("Show Me First: " + myWidth + "<br />");
                });


    $(myImg).appendTo("body");

    // This section is problematic...
    if(myWidth > 0) {
        $('#hello').append("Success!");    
    } else {
        $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />");
    }
});

我评论了有问题的部分;图像加载是异步的。当块被击中时，无法保证您的图像准备就绪。也许我应该在我之前的回答中指出这一点，但在这种情况下，最好在图像的回调函数中执行 all 你的DOM操作，这样当图像实际就绪时就会触发。

对此进行评论而不是键入另一段，但类似于......

// Move this outside the $(document).ready, for scoping reasons...
var myWidth = 0;

function loadImg(url, func) {
    var img = new Image();
    img.onload = function() { func(img); };
    img.src = url;
    return img;
}

$(document).ready(function() {
    loadImg("http://sstatic.net/so/img/logo.png", function(img) {
        var myImg = $(img);

        // Since you can't get the width until the image is appended, get around it
        // by throwing it in hidden; get the width, then unhide it and do what you want.
        myImg.css({
            "position": "absolute",
            "visibility": "hidden"
        }).appendTo("body");

        myWidth = myImg.width();

        myImg.css({
            "position": "normal",
            "visibility": "visible"
        });

        if(myWidth > 0) {
            $('#hello').append("Success!");    
        } else {
            $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />");
        }
    });
});

Answer 2

您可以使用jQuery function构建图片元素，使用appendTo将其插入#thisImage元素中，将load事件绑定到图片：

$j('<img src="image.jpg" id="box" />').appendTo('#thisImage').load(function() {
  console.log($j(this).width()); // image loaded, show width
});

Jquery：添加图像后抓取图像的宽度

2 个答案: