jquery img width() gives 0

奇怪的问题你知道为什么这段代码吗：

var img = new Image();
img.src = 'images/img1.jpg';
$(img).on('load', function() {
   alert($(this).width());
});

在火狐，Chrome中给出0，但在IE9中给出正确的值？如何在所有浏览器中获得适当的值？使用 jQuery 1.8.2<</p>

div class="one_answers">

jsBin demo

var img = new Image();
img.src = 'images/img1.jpg';
$(img).on('load', function() {
   alert(this.width);
});

或者使用纯 JS：

var img = new Image();
img.src = 'images/img1.jpg'; 
img.onload = function() {
   alert(this.width);
};

直到您将image附加到 dom .width()返回0

var img = new Image();
img.src = 'http://jsfiddle.net/img/logo.png';
$(img).on('load', function() {
    console.log(this.width); // 160
    console.log($(this).context.width); // 160
    console.log($(this).width()); // 0
    $('body').append($(this));
    console.log($(this).width()); // 160
});

检查这个。

根据

jQuery文档http://api.jquery.com/load-event/

与图像一起使用时加载事件的注意事项：开发人员尝试使用 .load（）快捷方式解决的常见挑战是当图像（或图像集合）具有完全加载。有几个已知的警告应该请注意。这些是：
1.It 不能始终如一地跨浏览器工作，也不能可靠地跨浏览器工作 2. 如果图像 src 设置为与以前相同的 src，则在 WebKit 中无法正确触发 3.它没有正确地冒泡DOM树 4.可以停止触发已经存在于浏览器缓存中的图像

如果您查看文档中的注释，许多人都有同样的问题，因为 webkit 中没有触发加载事件，通常是在之前将 src 设置为相同时......也许您想设置占位符图像，然后更改 SRC 属性。

jQuery确定对象维度的方式是通过检查style属性（afaik）;由于图像永远不会被添加到DOM中，所以它不会知道这一点。

话虽如此，我看不出为什么你需要jQuery在这里：

var img = new Image();
img.onload = function() {
    alert(this.width);
}
img.src = 'http://example.org/path/to/image.jpg';

要使用 jQuery 设置维度，您可以使用以下内容：

$(this)
    .width(this.width)
    .height(this.height);

不知道为什么需要它，因为在渲染时浏览器已经知道图像有多大，这与向 DOM 添加<img />不同

顺便说一句，这些语句的顺序很重要;您应该在设置 .src 属性之前注册 load 处理程序，否则如果浏览器缓存了图像，您可能会错过 load 事件。

jsBin demo

相关内容

最新更新

热门标签：