`

计算动态插入的IMG标签的宽高问题

 
阅读更多
一、先看代码如下:
<div id="cc"></div>
<script>
    $(document).ready(function() {
    $("#cc").append("<div id='aa' style='width:200px;height:200px;' /></div>");
    alert($("#aa").width());
});
</script>

结果为:200  注:所有浏览器都得到正确的结果

二、把插入的元素改为IMG
代码如下:
<div id="cc"></div>
<script>
  $(document).ready(function() {
  $("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' />");
  alert($("#aa").width());
});
</script>

(注:image1.jpg的实际宽为693)

结果为:
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0

再F5刷新一下,结果为:
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari和Chrome始终为0。

应该可以理解为在图片没有加载或呈现完成时计算出的图片宽高也是不正确的,刷新后应该是有了缓存,所以结果就正确了,但为什么Chrome和Safari始终都为0呢?而且IE和OPERA居然一开始还会计算出一个错误值出来的。

三、改成下面这样就都好了:
代码如下:
<div id="cc"></div>
<script>
  $(document).ready(function() {
  $("#cc").append("<img id='aa' src='http://www.jb51.net/images/logo.gif' />");
  window.setTimeout(function(){alert($("#aa").width()); },100);
});
</script>

四、或是改成代码如下:
$(document).ready(function() {
  $("#cc").append("<img id='aa' />");
  $("#aa").load(function(){
  alert($("#aa").width()
}).attr("src", "http://www.jb51.net/images/logo.gif");
});
分享到:
评论

相关推荐

    关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题

    然而,在处理动态插入的`&lt;img&gt;`标签时,这些方法可能会遇到一些问题,特别是当图片尚未完全加载时。这个问题在不同的浏览器中表现不一,如在你的例子中所示。 首先,让我们分析一下问题出现的原因。当`&lt;img&gt;`标签被...

    JQ 获取图片真实宽高

    - 当图片是通过动态插入DOM的方式添加到页面时,同样需要在插入后绑定`load`事件。 5. **性能优化**: - 为提高性能,避免一次性绑定大量图片的`load`事件,可以使用事件委托,或者只针对可见图片进行处理。 - ...

    HTML中img标签只显示图片中心位置的方法(三种方法)

    在HTML中,`&lt;img&gt;`标签是最常用的用来插入图片的元素。然而,有时我们需要让图片在页面上居中显示,而不是根据其原始尺寸铺满或裁剪。这里介绍三种方法来实现`&lt;img&gt;`标签只显示图片中心位置的效果。 ### 方法一:...

    等宽瀑布流照片显示

    - 单元格样式:每个图片元素(如`&lt;img&gt;`标签)应当包裹在一个具有固定宽度的`div`中,确保等宽效果。设置`box-sizing`为`border-box`,包含边框和内边距计算在内。 - 垂直对齐:为了达到瀑布流的效果,可以设置`...

    IMG写盘工具

    结合标签“IMG写盘工具”,我们可以推测这个压缩包文件包含了用于处理IMG文件的核心程序和可能的相关教程资料。其中,"IMG写盘工具.exe"很可能是该工具的可执行文件,用户下载解压后可以直接运行进行IMG文件的写盘...

    JSP中table的td标签迭代循环

    2. **`&lt;bean:write&gt;`标签**:这个标签是用来读取并输出对象的属性值,这里用它来获取`it`对象的`st_img`属性。 3. **控制每四张图片换一行的逻辑**: - `${index%4==0?"&lt;tr&gt;":""}`:当`index`是4的倍数时,表示新...

    HTML5插入图像案例.pdf

    * 案例一演示了如何插入本地图像,使用 `&lt;img&gt;` 标签的 src 属性指定图像的 URL。 * 图像可以来自本地文件夹,或者来自网络资源。 * 通过设置 `&lt;img&gt;` 标签的 alt 属性,可以为图像添加替代文本,以便于搜索引擎优化...

    IMG写盘工具.zip

    标题中的“IMG写盘工具.zip”表明这是一个包含用于写入IMG镜像文件到存储设备的软件工具的压缩包。在IT行业中,IMG文件通常被用来存储操作系统映像或固件更新,尤其在嵌入式系统如软路由中非常常见。软路由是一种...

    RichText自适应高度

    在IT行业中,富文本(Rich Text)是一种支持多种格式和样式文本的处理方式,它允许用户在文本中插入图片、链接、格式化字体等元素,广泛应用于文档编辑、网页设计和移动应用等领域,如聊天应用中的消息显示。...

    img图片大小适配插件

    HTML中的`&lt;img&gt;`标签用于插入图片,其`width`和`height`属性用于设置图片的尺寸。然而,当图片的实际尺寸与设定的尺寸不匹配时,浏览器会根据这些属性进行拉伸或压缩,可能导致图片失真。为避免这种情况,可以使用...

    html标签,属性大全.pdf

    37. **图像标签**:`&lt;img&gt;` 用于插入图像,并可通过属性设置其来源、大小等。 38. **输入控件标签**:`&lt;input&gt;` 提供多种类型的用户输入控件,如文本输入、复选框、单选按钮等。 39. **插入文本标签**:`&lt;ins&gt;` ...

    如何在EXCEL表格中批量插入对应图片.doc

    EXCEL 表格批量插入图片操作指南 作为一个 IT 行业大师,我将从给定的文件中生成相关知识点,以下是详细的解释和说明: 标题解释:如何在 EXCEL 表格中批量插入对应图片 在 EXCEL 表格中批量插入对应图片是指使用...

    HTML5标签速查表.pdf

    **标签**: `&lt;img&gt;` **描述**: 定义图像。 **5.2 图像映射标签** **标签**: `&lt;map&gt;`, `&lt;area&gt;` **描述**: `&lt;map&gt;`定义图像映射;`&lt;area&gt;`定义图像映射中的区域。 **5.3 画布标签** **标签**: `&lt;canvas&gt;` **...

    html5常用标签.txt

    1. **`&lt;img&gt;`**: 图像标签,用于插入图片。 2. **`&lt;a&gt;`**: 链接标签,用于创建超链接。 3. **`&lt;map&gt;`**: 定义图像中的可点击区域。 4. **`&lt;area&gt;`**: 图像映射中的一个热点。 5. **`&lt;figure&gt;`**: 包含图片或...

    HTML标签解释大全.doc

    `&lt;hr&gt;`标签用于在文档中插入一条水平线,通常用于分隔内容。 ##### **52. html** **说明:** 表明文档包含HTML元素。`&lt;html&gt;`标签是所有HTML文档的根元素,定义了文档的开始和结束。 ##### **53. i** **说明:**...

    H5常用标签汇总

    单标签一般用于声明或者插入某个元素,如声明字符编码就用,插入图片就用&lt;img&gt;;双标签一般用于设置一段区域的内容,将其包含起来,如段落&lt;p&gt;...。元素还可以设置属性和值,例如超链接:中的href属性,可以链接到...

    HTML标签简单总结

    - **&lt;img&gt;**:此标签用于嵌入图像,src属性定义图像的路径,width和height属性定义图像的尺寸,title属性提供图像的替代文本。 #### 表单标签 - ****:此标签用于定义表单,用于收集用户输入的信息。可以包含多个...

    计算机类Html网站模板

    4. 图像:使用`&lt;img&gt;`标签插入图片,并设置`src`属性指向图像文件的位置。 5. 列表:`&lt;ul&gt;`(无序列表)和`&lt;ol&gt;`(有序列表)标签,以及`&lt;li&gt;`(列表项)用于组织内容。 6. 表格:通过`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`, 和...

Global site tag (gtag.js) - Google Analytics