JQuery文档就绪AJAX函数-在刷新页面之前不加载图像

我有一个自定义代码，获取一个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');
        }
    });
});

$（文档）.ready（函数（）{
$.ajax({
键入：“GET”，
url:'config.xml？date='+moment（）.format（'hhmmss'），
数据类型：“xml”，
成功：函数（xml）{
var xmlDoc=$.parseXML（xml）；
var Img='images/'+$（xml）.find（'sitelogo'）.text（）；
$（“#徽标”）。附加（“”）；
var Height=$（'#logo'）.Height（）/2；
var Width=$（'#logo'）.Width（）/2；
$（'#logo>img'）.css（'height'，height）；
$（'#logo>img'）.css（'width'，width）；
$（'标题'）.css（'高度'，高度+20）；
$（'#sitename'）.text（$（xml）.find（'sitename'）.text（）+'Visitor Log'）；
}
});
});

---

我的问题是，除了图像（

$（“#logo”）.append（“”）

）在第一页加载时没有显示之外，其他一切都正常工作（当检查控制台时，图像已加载，但直到您执行页面刷新后才显示。其他一切正常，但我就是不知道发生了什么。我在谷歌上找到了很多关于JQuery Turbolinks的结果，但这是我第一次听说它，我肯定没有使用它。没有具体说明。）通过阅读解决了我的问题。

我在Chrome中检查并验证了这个问题

问题是，当您首先加载脚本时，图像正在追加，但高度是

0px

（因为空

div

的默认高度是

0px

）

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

这意味着当您执行

$（'#logo'）.height（）/2；

时，它实际计算为

0/2

在刷新中，它由浏览器按如下方式计算

要解决此问题，请在div中添加一个

高度

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



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


注
div
的默认宽度是其容器的
100%

空的
div
的默认高度是
0px
我在Chrome中检查并验证了这个问题

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

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


这意味着当您执行
$（'#logo'）.height（）/2；
时，它实际计算为
0/2

在刷新中，它由浏览器按如下方式计算


要解决此问题，请在div中添加一个
高度

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



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


注
div
的默认宽度是其容器的
100%

一个空的
div
的默认高度是
0px
多亏了Sagar V的回答-我必须为
#logo
div指定宽度和高度-图像就在那里，它在一个0 x 0的容器中是不可见的。我想通过努力变得聪明，我的生活变得更艰难，这就是结果。这将是一个价值让事情变得简单是一个很好的教训！
多亏萨加尔五世的回答-我必须为
#logo
DIV分配宽度和高度-图像就在那里，它只是在一个0 x 0的容器中看不见。我想，通过努力变得聪明，我的生活变得更加艰难，这就是结果。这将是一个有价值的教训，让事情变得简单示例！
你能在“fiddle”或
codepen”上共享你的代码吗？你能在控制台中检查图像元素在图像加载后是否确实可见吗？我的意思是，它有宽度和高度等。你能提供一个可用的小提琴或网页的url吗？很高兴它能帮助@Hyperjaseca你能在“fiddle”或
codepen上共享你的代码吗你能在控制台中检查图像元素在图像加载后是否确实可见吗？我的意思是，它有一个宽度和一个高度等。你能提供一个工作提琴或一个网页url吗？很高兴它帮助了@Hyperjas这解决了部分问题，在我的CSS中添加
高度：120px
可以确保DIV的高度正确，但在第一次加载时-图像仍然没有显示。我无法向您显示该网站，因为它是一个内部网，但我将尝试对其进行排序以进行演示。做一件事。按f12键，单击id为
sitebogo
的图像，检查
img
是否存在。如果是，将鼠标悬停在该网站上，并检查上面屏幕截图中显示的直径s解决了部分问题，在我的CSS中添加
height:120px
可以确保DIV是正确的高度，但在第一次加载时，图像仍然没有显示。我无法显示此网站，因为它是一个内部网，但我将尝试对小提琴进行排序以进行演示。做一件事。按f12，单击id为
sitebogo
的图像，check
img
是否存在。如果存在，将鼠标悬停在其上并检查直径，如上面的屏幕截图所示