代码之家 › 专栏 › 技术社区 › jeroen

dom中是否包含图像属性(jquery-webkit与其他浏览器不一致)?

google-chrome webkit safari dom jquery

jeroen · 技术社区 · 15 年前

我在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有问题:是否有一种方法可以使我的脚本比上面提到的解决方案更早地执行?

顺便说一下,我没有对图像维度使用任何内联属性。

4 回复 | 直到 14 年前

Jeff 15 年前

尝试在img标签中指定大小:

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

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

我推断的是,由于没有加载图像,WebKit只会以“未知”大小返回0,直到加载图像为止。具体说明尺寸可以解决这个问题。

Jeff 15 年前

我觉得这更像是一种黑客的方式,但它似乎有效(根据我的测试):

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浏览器仍然会比其他浏览器慢一点,因为它是在每个图像完成加载之后,但比等待要快。 全部的 要加载的图像。

shuckster 15 年前

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

真正的解决方案是在将图像添加到数据库时计算图像大小,然后在将其发送到客户端之前,使用宽度和高度属性正确生成<img>标记。

与首先将其上载到数据库的过程相比,初始计算(然后从数据库中提取值)中产生的任何开销都是微不足道的,更不用说以后每次对其进行检索了。

结果是一个语义上有意义的HTML标记,可以在您关心的所有浏览器中与jquery一起使用,那么为什么要避免它呢?

Anders Zakrisson 14 年前

我发现了在使用.load()动态加载图像时指定图像大小的方法,我使用带有回调的图像加载函数

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

然后我可以使用img元素(报告正确的大小)在回调中设置img属性。

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

现在我可以得到适当的宽度和高度,例如,

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