Question

我在Chrome和Safari上遇到了一个问题，使用jQuery使用一条图像的宽度进行一些计算。

使用我的计算时：

$(document).ready(function() {
    /* some calculations with $("img").width() */
});

在IE6 +和Firefox中一切正常，但在Chrome和Safari中没有：$（img）.width（）是0，无论图像是否已经缓存。

使用：

$(window).load(function() { 
    /* some calculations with $("img").width() */
});

它适用于所有上述浏览器，但问题是它只在所有图像完全加载时才会启动。

webkit行为是预期的行为还是有一些webkit / jQuery错误导致图像属性不是DOM的一部分？

如果是webkit / jQuery的问题：有没有办法让我的脚本比上面提到的解决方案更早执行？

顺便说一下，我没有为图像尺寸使用任何内联属性。

Answer 1

尝试在img标记中指定尺寸：

<img src="myimg.jpg" alt="" width="300" height="200" />

快速谷歌搜索： http://www.websiteoptimization.com/speed/tweak/size/

我推断的是，由于未加载图像，因此在图像加载之前，webkit将仅返回0作为“未知”大小。具体说明大小可以解决这个问题。

Answer 2

我觉得这更像是hack-ish方式，但它似乎有效（从我测试过的）：

function callback(){
    var el = $(this);
    // if this element was processed or width is 0 (for webkit), then skip
    if(el.data('loaded') || el.width() === 0)
        return;
    el.data('loaded', 1); // marked this element as "processed"
    // do whatever you want to do with el.width()
    console.log(el.width());
}
$(function(){
    // Non-webkit-based browsers will call callback() here
    // otherwise, after each image loads, the callback will execute
    // (for webkit browsers), when the size will be correct.
    $('img').load(callback).each(callback);
})

Webkit浏览器仍会比其他浏览器略慢，因为它是在每个图像完成加载后，但它比等待所有图像加载更快。

Answer 3

我不喜欢将任务卸载到应该在服务器上处理的客户端。

真正的解决方案是在将图像大小添加到数据库时计算图像大小，然后生成＆lt; img＆gt;在将其发送到客户端之前，使用width和height属性正确标记。

初始计算中产生的任何开销（以及之后从数据库中提取值）与首先将其上传到数据库的过程相比将是微不足道的 - 更不用说以后随后每次检索它了。 / p>

结果是一个语义上有意义的HTML标记，可以在你关心的所有浏览器中使用jQuery，为什么要避免使用它呢？

Answer 4

我发现这种在使用.load（）动态加载图像时指定图像大小的方法，我使用带回调的图像加载函数

loadImage: function(src, callback){
  $("<img alt="" />").attr("src", src).load(callback);
}

然后我可以使用img-element（报告正确的大小）来设置回调中的img-attributes

$(this).attr({
  id: img,
  width: this.width,
  height: this.height
});

现在我可以使用例如

获得适当的宽度和高度

var contentWidth = $("#img").attr("width");

图像属性是DOM的一部分（jQuery - webkit与其他浏览器不一致）吗？

4 个答案: