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 オブジェクトが2 番目の引数 として渡されますanimator。この Deferred はgoTo()、クラスを持つすべての画像imgSelectorが sussessully に読み込まれると内部で解決されます。アニメーションanimatorが起動し、ページのタイトルが変更されます。

外部で作成animatorして渡すと、この Deferredが呼び出されgoTo()たスコープから拒否されるようになります。goTo()この機能は、アニメーションが発生する前に別のクリックまたは 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 に答える