JQuery Document Ready AJAX 功能 - 在页面刷新之前不会加载图像答案

【问题标题】：JQuery Document Ready AJAX function - image not loading until page refreshedJQuery Document Ready AJAX 功能 - 在页面刷新之前不会加载图像
【发布时间】：2017-04-04 22:52:42
【问题描述】：

我有这个自定义代码，获取一个 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+'" />');) 之外，一切正常（当检查控制台时，图像已已加载但未显示直到您执行页面刷新。其他一切都按预期工作，但我无法弄清楚发生了什么。我有一个谷歌，发现了很多关于 JQuery Turbolinks 的结果，但这是我第一次听说它，我当然不会使用它。从我所读到的内容中，没有什么能特别解决我的问题。

【问题讨论】：

你能在'fiddle'或codepen分享你的代码
您能否在控制台中检查图像元素在图像加载后实际上是否可见？我的意思是，它有一个宽度和一个高度等。
你能提供一个工作小提琴或页面的网址
很高兴它帮助了@Hyperjase

标签： jquery html ajax xml

【解决方案1】：

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

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

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

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

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

要克服这个问题，请将height 添加到 div 中

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

那么它会在第一次加载时显示如下

注意

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

空div 的默认高度为0px。

【讨论】：

这解决了部分问题，在我的 CSS 中添加 height: 120px 可确保 DIV 的高度正确，但在首次加载时 - 图像仍未显示。因为它是一个 Intranet，所以我无法向您展示它所在的站点，但我会尝试整理一个小提琴来演示。
做一件事。按f12，点击id为sitelogo的图片，检查img是否存在。如果是，将鼠标悬停在上面并检查直径，如上面的屏幕截图所示

【解决方案2】：

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

【讨论】：