JQuery 无法从 IE 上的 tinymce 获取图像宽度答案

【问题标题】：JQuery can't get image width from tinymce on IEJQuery 无法从 IE 上的 tinymce 获取图像宽度
【发布时间】：2012-11-24 01:32:43
【问题描述】：

这个问题只出现在 IE9 上。 Firefox 运行良好，其他浏览器也一样。

我在用户上传图像的文本区域上使用 TinyMCE（带有 ImageManager 插件）。 textarea 专门用于上传图片。当用户将图像上传/插入到 tinyMCE 文本区域并提交页面时 - 我编辑检查图像尺寸以确保其尺寸正确，然后才能完成表单提交。

我将 tinyMCE textarea 的 html 加载到 JQuery 对象中，然后使用 jquery 调用对象的 .attr("width") 以确保图像是所需的宽度。

问题是在 FireFox 上，它工作正常，返回图像的宽度。在 IE9 上，对 .attr("width") 的 jquery 调用返回 0（零）。

代码如下：

sString = $('#projectimage1').html();   // fetch the contents of the tinymce form field
objWork.html(sString);      // load a work div with the html contents of the control
// check to see if the image has the correct dimensions
var objImage=null;
objImage = objWork.find("img:first");

alert("image html = " + objImage.html()); // this returns the correct html for the image tag, including the width
alert("image src = " + objImage.attr('src'));   // this returns the correct image src
alert("image width = " + objImage.attr("width"));   // this returns 0 in IE9!

我唯一能想到的可能是一个问题，就是当我在图像上“查看源代码”时它正在显示在 tinyMCE 文本区域中 - 图像标签中使用的所有 html 都是 html 编码的。所以 '

如果确实是这个问题，为什么IE9有这个问题，而FireFox没有？

如果这不是问题 - 是否有人对我如何进行/纠正有任何想法？

感谢专家！

【问题讨论】：

标签： jquery image tinymce

【解决方案1】：

在新创建的图像被实际渲染之前，浏览器可能还没有完成从缓存中加载图像并因此将其宽度记录到对象中。不同的浏览器在完成从缓存中加载某些内容时有不同的时间。如果你想要图像的宽度，你应该从它已经加载的地方而不是你复制它的地方获取宽度：

var width = $('#projectimage1 img:first').width();

在任何一种情况下，您都必须确保图像在收集其宽度之前已完成加载。

或者，您可以使用.complete 属性检查图像是否已完成加载，如果没有，则附加一个 onload 处理程序，以便您可以在加载完成时记录其宽度。

如果您希望我们对您在视图/源代码中看到的内容发表评论，您必须向我们提供一个指向实际网页的链接，以便我们了解那里的实际情况。因为您正在正确获取其他属性，例如 .src，所以浏览器似乎不太可能不解析 HTML。

【讨论】：