Question

我正在尝试使用pushstate / html5从其他网址加载内容...我尝试加载的内容有一个很大的背景图片需要时间来加载......

因此，当它动画快速时，完整的图像似乎会出现并滑入然后图像再次重新加载......

我尝试使用

image preloader/
$(document).ready()

他们都打破了剧本，似乎无法弄清楚如何在这里抄袭

    function goTo(href) {

    var left = $(window).width();
    $('#id').css("left", left);

    $.ajax({
        url: href,
        success: function (data) {

            var content = $(data).find('#id').html();

            // Windows Load Function
            $(window).load(function () {

                $("#id").html(content).animate({
                    left: '0',
                }, 'fast');

                var title = $('#id').find('h1').text();
                $('head').find('title').text(title);

            });
        }
    });
}

// check for support before we move ahead

if (typeof history.pushState !== "undefined") {
    var historyCount = 0;

    // On click of link Load content and animate
    $('.access a').live('click', function () {

        var href = $(this).attr('href');

        goTo(href);

        history.pushState(null, null, href);
        return false;
    });

    window.onpopstate = function () {
        if (historyCount) {
            goTo(document.location);
        }
        historyCount = historyCount + 1;
    };
}

Answer 1

如果您想等到所有内容和图片都已加载后，则需要$(window).load()而不是$(document).ready()。

所以你可能想要这样的东西：

$(window).load(function() {
    $('some element').css('background-image', 'url(big-background-image-file)');
});

加载图像/内容后从外部URL加载内容

1 个答案: