Javascript 以零高度显示图像&；加载ajax后的宽度

我有一个使用ajax页面加载的网站正在开发中。除图像外，所有这些都能正常工作

如果您访问下面的链接，您将看到一个标题为“Brands”的页面，该页面有一个svg图标，后跟一个img

现在，如果单击侧边栏中的“Brands”，页面将淡出，通过.load方法获取相同的页面，然后淡入内容。但是，您会注意到Chrome中似乎缺少svg。如果您签入safari，svg将可见，但img将丢失。如果在Firefox中选中它，则会显示alt属性

检查页面后，您会注意到它们的高度为0px，宽度为0px

为什么会发生这种情况，我如何解决

我确实尝试过创建一个简化的测试用例，但复制起来并不容易

以下是我的完整ajax代码：

Object.defineProperty(String.prototype, "decodeHTML", {

    value: function () {

        return $('<div>', {html: '' + this}).html();

    }

});

var init = function() {

        $('select').selectric({

            arrowButtonMarkup:'<svg class="selectric__button"><use xlink:href="/images/icons.svg#icon-right-chevron"></use></svg>'

        }, 'refresh');

    },
    ajaxLoad = function(html) {

        document.title = html.match(/<title>(.*?)<\/title>/)[1].trim().decodeHTML();

        init();

    },
    loadPage = function(href, get, put) {

        $(put).fadeOut(200, function(){

            $(put).load(href + ' ' + get, function(){

                ajaxLoad;

                $(put).fadeIn(200);

            });

        });

    };

init();

$(window).on('popstate', function(e) {

    var state = e.originalEvent.state;

    if (state !== null) {

        loadPage(location.href, state.get, state.put);

    } else {

        history.pushState({get: '.app-main > *', put: '.app-main'}, '', location.href);

    }

});

kga.doc.on('click', '.js-ajax', function() {

    var $this   = $(this),
        href    = $this.attr('href'),
        get     = $this.data('ajax-get') ? $this.data('ajax-get') + ' > *' : '.app-main > *',
        put     = $this.data('ajax-put') ? $this.data('ajax-put') : '.app-main';

    if (href.indexOf(document.domain) > -1 || href.indexOf(':') === -1) {

        history.pushState({get: get, put: put}, '', href);

        loadPage(href, get, put);

        return false;
    }

});

Object.defineProperty（String.prototype，“decodeHTML”{
值：函数（）{
返回$（''，{html:''+this}）.html（）；
}
});
var init=函数（）{
$（'select'）。selectric({
箭头按钮标记：“”
}“刷新”）；
},
ajaxLoad=函数（html）{
document.title=html.match（/（.*）/）[1].trim（）.decodeHTML（）；
init（）；
},
loadPage=函数（href、get、put）{
$（put）.fadeOut（200，函数（）{
$（put）.load（href+''+get，函数（）{
ajaxLoad；
美元.法代因(200美元);；
});
});
};
init（）；
$（窗口）.on（'popstate'，函数（e）{
var state=e.originalEvent.state；
如果（状态！==null）{
loadPage（location.href、state.get、state.put）；
}否则{
history.pushState（{get:'.app main>*'，put:'.app main'}'，location.href）；
}
});
kga.doc.on（'click'，'js ajax'，function（）{
变量$this=$（this），
href=$this.attr（'href'），
get=$this.data（'ajax-get'）？$this.data（'ajax-get'）+'>*'：'.app main>*'，
put=$this.data（'ajax-put'）？$this.data（'ajax-put'）：'.app main'；
if（href.indexOf（document.domain）>-1 | | href.indexOf（'：'）=-1）{
pushState（{get:get，put:put}'，，href）；
加载页面（href，get，put）；
返回false；
}
});

---

非常感谢您提供的任何帮助。

我们无法帮助您，因为所提供的代码无法向我们说明问题所在-AJAX请求只需将返回的代码加载到所提供的div中，任何图像都将由您返回的代码设置。提供的代码根本不处理图像，因此无法影响图像。另外，在Safari 8上，我看到一切都很好，没有什么遗漏。但Chrome也有这个问题。奇怪的是，代码对图像没有任何影响，正如你所说，它只是作为参考。我正在使用Safari9。你有机会看看firefox吗。我还可以提供什么来帮助说明这个问题。当然，浏览器应该只看到图像并正确显示它们？我不确定，因为我只知道您的SVG有问题，我不确定

use

元素到底是如何工作的，以及会出现什么问题。