Question

我有一个使用ajax页面加载的开发中的网站。这一切都按预期工作，除了图像。

如果您访问以下链接，您会看到一个页面标题＆＃34; Brands＆＃34;它有一个svg图标后跟一个img。

现在，如果您点击＆＃34; Brands＆＃34;在侧边栏中，页面将淡出，通过.load方法获取相同的页面，然后淡入内容。但是你会在Chrome中注意到svg似乎缺失了。如果您在safari中检查svg是可见的但是img丢失了。如果你在Firefox中检查它，那么你会显示alt属性。

检查页面后，您会发现它们的高度为0px，宽度为0px。

为什么会这样，我该如何解决？

http://kga.creativelittledevs.co.uk/consultant/brands/

我确实试过创建一个简化的测试用例，但它很难复制。

这是我完整的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;
    }

});

非常感谢任何帮助，谢谢。

显示零高度和高度的图像ajax加载后的宽度

0 个答案: