0

我有一张这样的桌子：

<table>
<tr>
<td id='tdleftcontent' style='border:1px solid red;'>
    <asp:Label ID='lbl' runat="server"></asp:Label>
</td>
</tr>
</table>

使用控制 lbl，在后面的代码中，我将文本设置为 'img src='/CMS/Images/News/event1.JPG' border='0' />'

    protected void Page_Load(object sender, EventArgs e)
    {
        this.lbl.Text = "<img alt='' src='/CMS/Images/News/event1.JPG' border='0' />";
    }

在 Javascript 中，我有一个函数来获取这个 td 的高度：

<script type="text/javascript">
$(document).ready(function(){
    var h = document.getElementById('tdleftcontent').offsetHeight;
    alert(h);
});

但结果是：h=22px。这意味着该图像尚未显示在网络上。结果图片： http ://upanh.nguoihoian.info/di-534E.jpg

请帮我解决这个问题。非常感谢。

4

4 回答 4

0

不要$(document).ready在这里使用。它将在DOM就绪时执行处理程序，即通常不加载图像。改用$(window).load，甚至更好地在图像本身上注册加载处理程序。

于 2012-04-17T05:46:10.697 回答
0

我建议像这样使用Image控件：

<asp:image runat="server" ImageUrl="~/CMS/Images/News/event1.JPG" BorderWidth="0" />

对于 JavaScript，只需使用 jQuery高度函数获取高度。

<script type="text/javascript">
$(window).load(function(){
    var h = $('#tdleftcontent').height();
    alert(h);
});
<script>

jQuery 中还有 innerHeight 和 outerHeight 函数以满足更具体的需求。

已编辑：其他人提出了一个很好的观点，即在加载图像之前高度值将不可用。如果您不想等到页面上的所有内容都加载完毕，那么您可以创建图像客户端并附加到它的加载事件。在图像添加到 DOM 之后，请注意设置 src 属性。

.NET 代码

this.lbl.Attributes["data-src"] = "/CMS/Images/News/event1.JPG";

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    var $td = $('#tdleftcontent');
    $('<img border="0" />')
        .bind('load', function() {
            $td.height();
            alert(h);
        })
        .bind('error', function() {
            $(this).hide();
        })
        .appendTo($td)
        .attr('src', $td.find('span').data('src'));
});
<script>
于 2012-04-17T05:36:34.463 回答
0

尝试使用<asp:placeholder>代替<asp:label>，并在浏览器中查看源代码以确保正确创建 IMG 标记并且 SRC 属性确实存在。

于 2012-04-17T04:55:11.100 回答
0

请注意，$(document).ready()一旦 DOM 准备好，就会执行您的代码。如果您想在加载图像后执行代码，那么您应该$(window).load(function () {})

于 2012-04-17T05:59:28.660 回答