关于用Jquery的height()、width()计算动态插入的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");
});

赞 (0)

相关推荐

  • jQuery中height()方法用法实例

    本文实例讲述了jQuery中height()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以获取或者设置匹配元素的高度值,默认单位是px. 语法结构一: 复制代码 代码如下: $(selector).height() 不带参数的时候是返回第一个匹配元素的当前高度. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name

  • jQuery中的height innerHeight outerHeight区别示例介绍

    标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距 html代码: 复制代码 代码如下: <div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj<

  • jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery的位置

  • jQuery获得包含margin的outerWidth和outerHeight的方法

    本文实例讲述了jQuery获得包含margin的outerWidth和outerHeight的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(fun

  • jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).height():浏览器可视窗口的高度 $(window).scrollTop():浏览器可视窗口顶端距离网页顶端的高度(垂直偏移) $(document.body).height();//浏览器当前窗口文档body的高度 $(document.body).outerHeight(true);//浏览

  • 使用jquery中height()方法获取各种高度大全

    复制代码 代码如下: alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window

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

    先来看现象: 复制代码 代码如下: <div id="cc"></div> <script> $(document).ready(function() { $("#cc").append("<div id='aa' style='width:200px;height:200px;' /></div>"); alert($("#aa").width()); }); &l

  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

  • jQuery实现列表内容的动态载入特效

    采用Jquery实现的列表数据动态更新效果,更新的数据可以是ajax请求的数据. CSS: .main { width: 100%; margin-top: 100px; text-align: center; font-size: 12.5px; } th, td { border: 1px solid #ccc; line-height: 40px; padding-left: 5px; } .item:hover { background-color: #efefef; } .item:n

  • jquery实现鼠标滑过后动态图片提示效果实例

    jquery实现鼠标滑过后动态图片提示效果实例

    本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {

  • jQuery+css3实现Ajax点击后动态删除功能的方法

    jQuery+css3实现Ajax点击后动态删除功能的方法

    本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方框中加入一些内容,jquery插件选的版本是1.6.2,更高版本也是可以的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • 解决Jquery下拉框数据动态获取的问题

    废话不多说,直接上源码: select.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+&q

  • jQuery实现为table表格动态添加或删除tr功能示例

    本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: <!-- 订单明细dialog --> <div id="contractDetailDiv" title="销售订单明细" style="display:none;"> <table class="exhibit_table" id="contractDeta

  • jQuery给指定的table动态添加删除行的操作方法

    jQuery给指定的table动态添加删除行的操作方法

    最近写程序,碰巧有动态增加删除行的,下面就记录一下. $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自

  • 利用jquery给指定的table动态添加一行、删除一行的方法

    利用jquery给指定的table动态添加一行、删除一行的方法

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

随机推荐