图像高度始终返回为0
Image height always returned as 0
我正试图遵循这个SO关于如何对图像进行着色的答案,但当我这样做时,$("#myselector").height();
一直返回为0。我做错了什么?这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
overlay = $("#overlay");
img = $("#myimg");
overlay.width($("#myimg").width());
alert($("#myimg").height());
overlay.height("100");
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
});
</script>
<body id="home">
<div id="overlay" class="overlay"></div>
<img id="myimg" src="building.png" />
</body>
</html>
我的最佳猜测是图像尚未加载。
您的脚本运行onready
。如果你把它改成onload
,你可能会得到更好的结果。
更改
$(document).ready(function() {
至
$(window).load(function() {
更多:window.onload vs$(document).ready()
使用图像的load
事件:
$(document).ready(function() {
overlay = $("#overlay");
img = $("#myimg");
img.load( function(){
overlay.width($("#myimg").width());
alert($("#myimg").height());
overlay.height("100");
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
});
});
替换:
$(document).ready(function() {
上:
$(window).load(function() {
相关文章:
- 尝试使用多个Twenty20实例,但有些实例的高度返回为0,并且不显示
- Javascript返回内容/字符串;不适合UIWebView的给定宽度和高度
- 黑莓网站:窗口大小(窗口高度)在黑莓模拟器中返回不正确的值
- Jquery高度返回错误值
- Image.onload 函数为高度和宽度返回零
- Android Webview onLoad返回错误的高度
- .height() 以百分比返回高度,如何以像素为单位获取它
- jquery 高度返回 0
- 为什么jQuery为元素高度返回null
- 我设置的高度和宽度值与返回的值不一致的原因是什么
- 图像高度始终返回为0
- onLoad返回0作为宽度和高度
- 文档's总高度函数's的返回值在浏览器刷新时发生更改(F5)
- Jquery偶尔会在图像上返回零高度和零宽度
- 为什么不't此代码返回完整的文档高度
- jquery最大高度和最大宽度返回错误的值
- FabricJS toDataURL倍增器没有返回正确的高度/缩放正确
- Javascript在Firefox for Android中随机返回不一致的高度
- jQuery加载事件在Chrome浏览器返回零的宽度/高度值在弹出
- Javascript Image()返回错误的宽度和高度