页面加载期间IE中没有图像的高度和宽度

Posted 2023-03-06

【中文标题】页面加载期间IE中没有图像的高度和宽度

【英文标题】：No height and width of images in IE during page load

【发布时间】：2012-05-24 18:40:39

【问题描述】：

jQuery(window).load(function() 
    jQuery.each(jQuery(".extraimgs"), function() 
        //this.height = 0 and this.width=0 in IE only
        if (this.height > this.width) 
            if (this.height > 263) 
                this.height = 263;
            
            if (this.width > 354) 
                this.width = 354;
            
        
        else 
            this.height = 263;
            this.width = 354;
        
    );
);

html 代码

<asp:DataList runat="server" ID="dlImages" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="Table" OnItemDataBound="dlImages_ItemDataBound" Style="display: none;">
    <ItemTemplate>
        <div>
            <asp:Image runat="server" ID="imgPics" class="extraimgs" />
        </div>
    </ItemTemplate>                                 
</asp:DataList>

我在 IE 中遇到此代码的问题。在这里，我在运行时设置图像的高度和宽度（页面加载事件 - 使用 jQuery）和使用代码隐藏的图像源。

此代码在除 IE8 之外的所有浏览器中运行良好。在页面加载事件中，我得到了图像的高度和宽度，但在 IE8 中我没有得到图像的高度和宽度。在加载事件期间，我尝试了很多方法来获取图像的高度和宽度，但它不起作用。

有人知道解决办法吗？

【问题讨论】：

你试过$(this).height()和$(this).width()吗？应该可以的。

是的..我试过了。但它不起作用。我得到 0（零）作为高度和宽度

有一个 jsfiddle 来玩这个会很好。您也可以尝试改用jQuery(".extraimgs").load(function() /* ... */)，因为可能在执行代码时图像尚未加载。

我会阅读 this 和 this

这应该可以，jsfiddle链接会很好玩。

【参考方案1】：

$(document).load() 或 $(document).ready() 而不是 $(window).load() 呢？

【讨论】：

确实，我没有注意到 OP 使用的是.load()。

【参考方案2】：

试试这个：

jQuery(document.body).load(function () 
      jQuery(".extraimgs").each(function (i) 
        if (this.height > this.width) 
            if (this.height > 263) 
                this.height = 263;
            
            if (this.width > 354) 
                this.width = 354;
            
        
        else 
            this.height = 263;
            this.width = 354;
        
      );
    );

【讨论】：

它不工作..这里我没有使用这个得到高度和宽度

【参考方案3】：

好的，根据我上面的评论，这是一个应该可以工作的版本：

jQuery(function() 
    jQuery(".extraimgs").load(function() 
        var $this = $(this);
        if ($this.height > $this.width) 
            if ($this.height > 263) 
                $this.height = 263;
            
            if ($this.width > 354) 
                $this.width = 354;
            
        
        else 
            $this.height = 263;
            $this.width = 354;
        
    );
);