Question

我试图在图片变量中加载图片并测试它是否为横向或纵向，以便将其放入框架中。用户从下拉列表中选择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);

Answer 1

您试图在图像加载之前读取图像的高度和宽度当Temp_Image加载完毕后，将调用onload，因此图像将具有宽度和高度。

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

Answer 2

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

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

Answer 3

即使javascript是单线程的，浏览器也不是。因此，尽管您尽可能地将用户的系统置于无限循环中，但浏览器仍然设法加载您的图像，现在需要将它的属性推送到javascript世界中访问。

你的while循环将继续跳进并妨碍浏览器尝试做的所有javascript相关的事情，所以即使在映像准备好之后，事件循环可能需要很多周期来实际填充{的属性您的图片上有{1}}和width，他们可能无法在同一个循环中更新。

所以你的测试是这样的:(我们假装它的100px x 100px）

height

如果它的真实（意味着高度尚未可用），它将看起来像这样。

// repeat this over and over and over
if ( Temp_Image.width < 1) /* true */
   Image_Width = Temp_Image.width /* 0 */

// until finally
if (Temp_Image.width === 0 /* false */)
    // okay we finally branched into right side of expression
    if (Temp_Image.height < 1) /* ??? */
        // what now?

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

// 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

在循环的每次迭代中，将宽度一次又一次地设置为0，但是如果在最终收到实际宽度值时高度属性已经可用，那么在将其存放到循环中之前，您将在循环顶部中断变量

无法保证首先设置哪个属性，（宽度或高度），如50/50结果所清楚显示的那样。

因此，如果这是用于研究循环，那么继续尝试让它自己正常工作。如果答案对你来说并不明显，那么这可能是一项很好的练习。

但如果你真的想在浏览器中提供图片，那就不要这样做！你正在阻止线程！停下来！

按照已经给出的监听if (Temp_Image.width < 1 ) /* false */ break Image_Height = Temp_Image.height /* 100 */ // wait... hold on... we forgot to set the width事件的建议而不是循环。

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

3 个答案: