jQuery的：抓住一个图像的宽度增加图像

Question

可能是一个简单的解决方案之后，但我坚持与它的晚... :)

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

当我做一个console.log(imgWidth)它返回0 ...

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

所以我正在寻找一个很好的解决方案，等待.html(...)电话完成后再继续我的.width(...)致电

任何帮助，非常感谢。谢谢！

---

更新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作为.load返回//my first log之前还没有完成完成...

因此我if语句总是false作为imgWidth总是0 ...

即至.load完成......但随后一切都太迟了......

---

更新2：看到我所看到

使用瑞安的回答修改...

转到jsbin.com - >包括从下拉菜单“jQuery的” - >在的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 />"); 
    } 
}); 

我评论有问题的部分;图像加载是一个异步的东西。在该块被击中的时候，不能保证你的图像准备就绪。也许我应该在我之前的回答中指出了这一点，但在这种情况下，最好在图像的回调函数中对您的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 
});