2

jquery lazyload プラグインを使用して webapp にコンテンツを遅延ロードしようとしていますが、ページの最初の読み込みで完全に機能します。これは私が使用するコードです:

    $(".lazy").lazyload({         
        effect : "fadeIn",
        container: $("#wrapper")
    });

問題は、ブラウザの後方ナビゲーションにあります。ユーザーが新しいページに移動してから戻るボタンを押して、遅延読み込み機能を使用してページに戻ると、ブラウザーのビューポート内になかった画像は引き続き正常に遅延読み込みされますが、ビューポート内にあった最後の画像は遅延読み込みされませんでしたページが変更される前にロードと表示が完了していない場合、ページはロードされません。そのため、以前に読み込まれた画像と次に読み込まれた画像の間には、未完成の画像が配置されている空きスペースがあります。

この問題を回避する方法を考えられる人はいますか?

4

2 に答える 2

0

これは、バックフォワードキャッシュが原因で発生します。より良い説明は、 モバイルSafariの戻るボタンの質問にあります。どうやら問題はiOS5モバイルSafariにのみ影響します。これは1.8.2で修正されました。

于 2013-01-27T11:35:10.310 に答える
0

いくつかのドキュメントを読んだ後、次を使用してすべてのブラウザーで動作させることができました。

function myLoadHandler(evt)
{
    if (evt.persisted) {

        $(".lazy").lazyload({         
            effect : "fadeIn",
            container: $("#wrapper")
        });

        return;
    }

        $(".lazy").lazyload({         
            effect : "fadeIn",
            container: $("#wrapper")
        });
}

function myUnloadHandler(evt)
{
    if (evt.persisted) {
        $.noop();

        return;
    }

    $.noop();
}

if ("onpagehide" in window) {
    window.addEventListener("pageshow", myLoadHandler, false);
    window.addEventListener("pagehide", myUnloadHandler, false);
} else {
    window.addEventListener("load", myLoadHandler, false);
    window.addEventListener("unload", myUnloadHandler, false);
}
于 2012-08-02T04:09:37.013 に答える