使用 jQuery 从背景图像获取尺寸

Question

我正在将背景图像加载到 div 中。是否可以从该图像中获取尺寸？

我正在尝试创建一个函数，可以动态用图像替换文本，以便在菜单中使用。

$.fn.MenuImages = function() {
  return this.each(function(i) {
    var name = $(this).find('a').attr('title');
    $(this).css("background-image","url(images/menu-"+name+"-h.png)");
  });
};

问题是图像的大小并不相同。我不知道如何读取文件的尺寸，除非我将它加载到隐藏的 div 或其他东西中，但这听起来很脏。有什么建议吗？谢谢！

固定的：

$.fn.MenuImages = function() {
return this.each(function(i) {
    var link = $(this).find('a');
    var name = link.attr('title');
    link.html("<img src='images/menu-"+name+"-h.png' />");
});

};

Answer 1

​$('<img src='images/menu-"+name+"-h.png' />')​.attr('src',function(){
    return $('body').css('background-image');
})​​​.load(function(){
    w = $(this).width();
    h = $(this).height();
})​;

这会等到图像加载后获取高度和宽度。

Answer 2

var img=new Image();
img.onload=function(){
    alert(img.width);
    alert(img.height);
};
img.src="image.png";

Answer 3

Jquery

w = $("img").width();
h = $("img").height();

Ruby

IO.read('image.png')[0x10..0x18].unpack('NN')

这会生成一个数组 [width,height]，您可以提取 [0] 作为宽度等...