JQuery Document Ready AJAX函数 - 图像在页面刷新前不加载

Question

我有这个自定义代码，使用XML文件并使用这些值来填充页面上的某些数据：

$(document).ready(function() {
    $.ajax({
        type: 'GET',
        url: 'config.xml?date=' + moment().format('hhmmss'),
        dataType: 'xml',
        success: function(xml) {
            var xmlDoc = $.parseXML(xml);
            var Img = 'images/' + $(xml).find('sitelogo').text();
            $('#logo').append('<img src="' + Img + '" />');
            var Height = $('#logo').height() / 2;
            var Width = $('#logo').width() / 2;
            $('#logo > img').css('height', Height);
            $('#logo > img').css('width', Width);
            $('#header').css('height', Height + 20);
            $('#sitename').text($(xml).find('sitename').text() + ' Visitor Log');
        }
    });
});

我的问题是除了第一页加载时没有显示的图像（$('#logo').append('<img src="'+Img+'" />');）之外一切正常（当检查控制台时图像已加载但是在您执行页面刷新之前，它还没有显示出来。其他所有内容都按预期工作但我无法弄清楚发生了什么。我有一个Google并且发现了很多结果关于JQuery Turbolinks，但这是我第一次听到它并且我当然没有使用它。没有什么能从我读过的内容中解决我的问题。

Answer 1

我在Chrome中检查并验证了此问题。

问题是，当您首先加载脚本时，图像会附加，但高度为0px（因为空div的默认高度为0px）。

然后当你刷新时，浏览器计算并添加高度

这意味着当您执行$('#logo').height() / 2;时，它实际上计算为0/2

在刷新时，它由浏览器计算如下。

要解决此问题，请将height添加到div

<div id="sitelogo" style="height:400px;"></div>

然后它将在第一次加载时显示如下

注意

div的默认宽度为其容器的100%。

空div的默认高度为0px。

Answer 2

感谢Sagar V的答案 - 我必须为#logo DIV分配宽度和高度 - 图像在那里，它在0 x 0容器内是不可见的。我认为，通过努力变得聪明，我的生活更加艰难，这就是结果。这将是保持简单的宝贵教训！