0

我正在尝试使用 pushstate/html5 从另一个 url 加载内容...我尝试加载的内容有一个很大的背景图像，需要时间来加载...

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

我尝试使用

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;
    };
}
4

2 回答 2

0

$(window).load()如果您想$(document).ready()等到所有内容和图像都加载完毕，您需要这样做。

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

$(window).load(function() {
    $('some element').css('background-image', 'url(big-background-image-file)');
});
于 2012-08-01T20:05:42.097 回答
0

基督山，

我认为这是最好的解决方案 Deferreds。

goTo()在下面的代码中，一个 Deferred 对象作为第二个参数传递给animator. goTo()当所有具有类的图像imgSelector都已加载时，此 Deferred 将在内部解决。在动画的分辨率上animator触发并且页面的标题被改变。

在外部创建animator并将其传递给goTo()允许此 Deferred 在被调用的范围内被拒绝goTo()。如果在动画触发之前发生另一个 click 或 popstate 事件，则包含此功能以禁止动画。

为了使这个工作，您需要为每个内容页面提供一个虚拟的离屏前景<img>，与src有问题的大背景图像和class="critical". 这是在加载背景图像时触发事件的最简单方法。

$(function() {
    var $id = $("#id");
    var imgClass = 'critical';
    function goTo(href, animator) {
        $id.stop().css("left", $(window).width());
        $.ajax({
            url: href,
            success: function(data) {
                var deferreds = [];
                $id.html($(data).find('#id').html());
                $("img." + imgClass, $id).each(function() {
                    var d = new $.Deferred();
                    deferreds.push(d);
                    $(this).on('load error', function(){
                        d.resolve();
                    });
                });
                $.when.apply(null, deferreds).done(function() {
                    animator.resolve();
                });
                $.when(animator).done(function() {
                    $id.animate({
                        left: '0',
                    }, 'fast');
                    $('head title').text($('h1', $id).text());
                });
            }
        });
    }

    var historyCount = 0,
        animator = null;

    function getDeferred() {
        if(animator) {
            animator.reject();
        }
        animator = new $.Deferred();
        return animator;
    };

    if (typeof history.pushState !== "undefined") {
        $('.access a').live('click', function() {
            var href = $(this).attr('href');
            goTo(href, getDeferred());
            history.pushState(null, null, href);
            return false;
        });
        window.onpopstate = function() {
            if(historyCount) {
                goTo(document.location, getDeferred());
            }
            historyCount++;
        };
    }
});

未经测试

您可能需要调试和/或修改代码以获得您想要的。

于 2012-08-02T01:00:59.300 回答