2

PJAX は、すべての一般的なパターンを再度読み込む代わりに、要求されたページの必要なコンテンツのみを読み込むことで非常に簡単にジョブを実行し、受信したコンテンツをレイアウトに配置します。

Instantclick (instantclick.io) は、リンクのホバー時にページを要求し、コンテンツをキャッシュにロードし、ユーザーがクリック エクセレントを離したときにコンテンツを置き換える興味深いものですが、これはページ全体をロードします。

私が欲しいのは、InstantclickがPJAXのような必要なコンテンツのみをプルすることです.リンクのホバー時にPJAXリクエストをトリガーするようなものです（Instantclickのサポートの有無にかかわらず）-リンクに移動してクリックしてクリックするまでに遅延があり、解放されます。今回は、PJAX がジョブを完了し、コンテンツを即座に 100% 表示します。

それを行う方法はありますか？

ありがとうございました

4

3 に答える 3

1

pjax ナビゲーションを追加するスタイル ガイド用に、少し前に行ったコードを変更しました。あなたのリクエストのアイデアが気に入りました。それは悪いアイデアではありませんが、ページ上のすべてのリンクをキャッシュしない、外部ページを検出するなどのオプションが必要ですが、自由に使用してください。まだいくつかのコンソール debugがあり、それは少し未加工で、jQueryを使用しています。

var SPAajaxloading = function () {

    var $links = $('#nav a');
    var historyCache = {};


    var getCache = function (url) {
        return historyCache[url];
    };
    var setCache = function (url, content) {
        historyCache[url] = content;
    };
    var setContent = function (content, URL) {
        $('#content').html(content);
        history.pushState(null, null, URL);
    };

    var getFragmentContent = function (responsecontent) {
        var $fakediv = $('<div>');
        $fakediv.html(responsecontent);
        return $fakediv.find('#content').html();
    };

    var getPageContent = function (URL, caching) {
        return $.ajax({
            url: URL
        }).promise().done(function (response) {
            var _content = getFragmentContent(response);
            !caching && setContent(_content, URL);
            setCache(URL, _content);
        });
    };


    var linkbinding = function (e) {
        e.preventDefault();
        var _URL = this.href;

        var cachedContent = getCache(_URL);
        //todo refactor this with popstate
        if (e.type === 'click' && cachedContent) {
            console.info('content inserted via cache');
            setContent(cachedContent, _URL);
        }
        else {

            // if mouseenter and cache is here, do nothing
            if (e.type === 'mouseenter' && cachedContent) {
                console.info('nothing to do, caching already done');
            }
            else {
                console.info('putting content in cache?', e.type === 'mouseenter');
                getPageContent(_URL, e.type === 'mouseenter')
            }
        }
    };

    $links.on('mouseenter click', linkbinding);

    setCache(location.href, $('#content').html());

    $(window).on('popstate', function () {
        var _URL = location.href;
        var content = getCache(_URL);
        if (content) {
            setContent(content, _URL);
        }
        else {
            getPageContent(_URL)
        }
    });

};

これを改善したい場合、または PJAX の読み込みで別の github プロジェクトを開始しない理由がある場合は、Gisthub に投稿しました。 https://gist.github.com/romuleald/bc7d4a941f42f8e4bc0e

于 2015-04-15T09:48:33.893 に答える
0

ライブラリjquery.pjax.jsとInstantclickの両方を分析しましたが、それらを統合しようとすると、結合が強すぎます。

難しい解決策の 1 つは、あるライブラリの機能を別のライブラリに統合することですが、残念ながら私にはそのための十分な知識がありません。

私が提案できるのは、以前のソリューションに基づくハックです。

主なアイデアは、マウスオーバーでクリックイベントをトリガーすることですが、コンテナーはdisplay:none. クリックよりもコンテンツを から#hidden-containerに移動します#container。

html コードは次のようになります。

<div id="container"></div>
<div style="display:none" id="hidden-conainer"></div>

代わりに、js は次のようになります。 

$(document).ready(function(){
    if ($.support.pjax) {
        $('a').on('mouseover', function(event) {
            // clean idden-conainer 
            $('#hidden-conainer').empty();

            var container = $('#hidden-conainer');
            $.pjax.click(event, {container: container});
        }).on('click', function(event) {
            event.preventDefault();
            $('#container').html($('#hidden-conainer').html());
        });
    }
});

これらの理由により、私の観点からは解決策は間違いなく不完全です。

  • Instantclick は、タッチでモバイルでも処理します。このソリューションはありません
  • 多くのリンクが閉じられていて、ユーザーが上部をクリックせずに「遊んでいる」だけの場合、jsはクリーンアップを続け、適切なコンテンツを必要としますが、バーではアドレスが変化し続けることがわかります

それらの問題でさえ、あなたが速い感覚を達成したいのであれば、それは「十分に良い」かもしれません. 実際、ユーザーがリンクに直接アクセスしてクリックした場合、UX は優れています。

それに加えて、おそらくマウスオーバー用のキャッシュを作成するとよいでしょう。そうすれば、ユーザーがインターフェイスにストレスをかけようとしても、常に同じ呼び出しを行うことはありません。

于 2015-04-13T12:44:51.463 に答える