获取Javascript中图像变量的高度和宽度

我正在尝试将图片加载到图像变量中，并测试它是横向还是纵向，以便将其放入帧中。用户从下拉列表中选择URL。但是，下面的代码段每隔一段时间给出一个宽度0。我在做什么蠢事

        var Select_Picture = document.getElementById("ddlSelectPicture");
        var Client_Picture = document.getElementById("imgClientPicture");
        var Temp_Image = new Image();
        var Image_Height;
        var Image_Width;

        Temp_Image.src = Select_Picture.value;

        // WAIT FOR PICTURE TO LOAD
        while (Temp_Image.width < 1 || Temp_Image.height < 1)
        {
            Image_Width = Temp_Image.width;
        }
        Image_Height = Temp_Image.height;

        alert(Image_Width + "  " + Image_Height);

var Select_Picture=document.getElementById（“ddlSelectPicture”）；
var Client_Picture=document.getElementById（“imgClientPicture”）；
var Temp_Image=新图像（）；
var图像高度；
var图像宽度；
Temp_Image.src=选择图片值；
//等待图片加载
while（Temp_Image.width<1 | | Temp_Image.height<1）
{
图像宽度=临时图像宽度；
}
图像高度=温度图像高度；
警报（图像宽度+图像高度）；

您试图在图像加载之前读取图像的高度和宽度。

onload

将在Temp_Image完成加载时调用，因此图像将具有宽度和高度

Temp_Image.onload = function() {
    console.log(Temp_Image.width);
}
Temp_Image.src = Select_Picture.value;

---

您可以像这样直接获得高度和宽度：

var height = document.getElementById("myImg").height;
var width = document.getElementById("myImg").width;

---

尽管javascript是单线程的，但浏览器不是。因此，当您尽最大努力让用户的系统因无休止的循环而急停时，浏览器仍然能够加载您的图像，现在需要将其属性推送到javascript世界中供您访问

您的while循环将不断跳入并阻碍浏览器尝试执行的所有与javascript相关的操作，因此即使在图像准备好之后，也可能需要多次事件循环来实际填充图像上的

width

和

height

属性，并且它们可能不会在同一个循环中更新

所以你的测试是这样的：（我们假设它是100px x 100px）

//一遍又一遍地重复这个
如果（温度图像宽度<1）/*为真*/
Image\u Width=Temp\u Image.Width/*0*/
//直到最后
如果（Temp_Image.width==0/*false*/）
//好了，我们终于转到了表达式的右侧
如果（温度图像高度<1）/**/
//现在怎么办？

好吧，如果它是真的（意思是高度还不可用），它会是这样的

// keep repeating this over and over and over
if (Temp_Image.width < 1 ) /* false */ 
    if (Temp_Image.height < 1) /* true */
       Image_Width = Temp_Image.width /* 100 */

// until finally
if (Temp_Image.width < 1 ) /* false */
    if (Temp_Image.height < 1) /* false */
        break
Image_Height = Temp_Image.height /* 100 */

// we've finally left the loop and the width is properly set

if (Temp_Image.width < 1 ) /* false */
    break
Image_Height = Temp_Image.height /* 100 */

// wait... hold on... we forgot to set the width

//不断地重复这个
如果（温度图像宽度<1）/*假*/
如果（温度图像高度<1）/*为真*/
图像宽度=温度图像宽度/*100*/
//直到最后
如果（温度图像宽度<1）/*错误*/
如果（温度图像高度<1）/*错误*/
打破
图像高度=温度图像高度/*100*/
//我们终于离开了循环，宽度设置正确

好吧，如果它是假的（意思是高度已经可用），它将看起来像这样

// keep repeating this over and over and over
if (Temp_Image.width < 1 ) /* false */ 
    if (Temp_Image.height < 1) /* true */
       Image_Width = Temp_Image.width /* 100 */

// until finally
if (Temp_Image.width < 1 ) /* false */
    if (Temp_Image.height < 1) /* false */
        break
Image_Height = Temp_Image.height /* 100 */

// we've finally left the loop and the width is properly set

if (Temp_Image.width < 1 ) /* false */
    break
Image_Height = Temp_Image.height /* 100 */

// wait... hold on... we forgot to set the width

if（Temp_Image.width<1）/*false*/
打破
图像高度=温度图像高度/*100*/
//等等。。。等等我们忘了设置宽度

在循环的每次迭代中，您都会反复将“宽度”设置为0，但如果最终收到真实的“宽度”值时“高度”属性已可用，则在将其存储在变量中之前，您会在循环的顶部断开

无法保证先设置哪个属性（宽度或高度），50/50结果清楚地表明了这一点

因此，如果这是为了研究循环，那么请继续努力，让它自己正常工作。如果答案对你来说不明显，这可能是一个很好的练习

但是如果你真的想在浏览器中提供图像，那就不要这样做！你把线堵上了！住手

---

按照已经给出的建议，监听

load

事件，而不是循环。

问题。。这些元素在一个iFrame中吗？为了所有神圣的爱，不要使用while循环。Javascript是单线程的，当循环运行时，您将阻止所有内容。相反，你可以这样做<代码>Temp_Image.onload=function（）{/*dostuff*/}；Temp_Image.src=Temp_Image.src或lookup如何执行，加载了Q/A。这样做了-不知道.onload或您可以使用它执行内联函数。非常感谢你恢复了我一贯的疯狂D