无法测量Firefox中Html-Image的客户端宽度
无法测量Firefox中Html-Image的客户端宽度
提问于 2019-08-05 08:32:31
我正在尝试在感兴趣的点(poi)上放置标记。这些poi被设置在不同的软件中，并存储在数据库中。该位置由它们相对于原始图像的像素位置确定。在我的webapp中，由于panzoom.js (一个与我的问题无关的插件)，图片被缩小了。我得到了正确的标尺公式，唯一的问题是:在firefox中，我无法及时阅读图片大小(在Chrome中，这不是问题)。这是守则
$(document).ready(function ()
{
var imagectrl = document.getElementById('<%= img.ClientID %>');
var hiddenfield = document.getElementById('<%= hf.ClientID %>');
if (hiddenfield.value == "")
{
var myWidth;
var myHeight;
myWidth = imagectrl.clientWidth;
myHeight = imagectrl.clientHeight;
hiddenfield.value = myWidth + ';' + myHeight;
__doPostBack();
}
});如果我手动回发(单击一个显示图像的更高质量的按钮)，大小将被正确地写入。
当我的X或Y为0时，我也尝试从代码后面调用一个相同的函数，但是没有工作。
当第一次加载页面时，我能做些什么来获得图像大小？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-15 08:43:30
我找到了一个解决方案:不管我做了什么，图像本身都无法及时测量。因此，我通过CSS给出了图像周围控件的高度，并使用
AddHandler dvGalerieFill.Load, AddressOf Me.measure_height在Page_Load方法中对周围控件的加载作出反应。在"measure_height“中，我调用了Javascript函数。通过控件的高度(wich是图像的高度)，我可以用相同的因子计算图像的宽度为高度和宽度。
Stack Overflow用户
发布于 2019-08-05 08:53:57
Firefox在异步操作(如图像加载)上的实现与Chrome不同。我想这可能是为什么在Chrome中，您可以立即使用$(document).ready访问图像，但是在火狐中，图像源在文档准备好之后才会加载--因此，clientWidth和clientHeight将无法定义。
解决方案：在您的图像上定义一个onload事件处理程序，并将您的逻辑放入该方法中：
$(document).ready(function ()
{
var imagectrl = document.getElementById('<%= img.ClientID %>');
var hiddenfield = document.getElementById('<%= hf.ClientID %>');
imagectrl.onload = function() {
if (hiddenfield.value == "")
{
var myWidth;
var myHeight;
myWidth = imagectrl.clientWidth;
myHeight = imagectrl.clientHeight;
hiddenfield.value = myWidth + ';' + myHeight;
__doPostBack();
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57354834
复制相关文章
相似问题
腾讯云开发者
