5

2つの古典的なHTMLページ（HTMLとCSSのみ）とそれらの間のリンクがあります。
これらのリンクをクリックすると、画面がちらつきます（トランジション間ですぐに白くなります）。
私はこれを頭に入れようとしました-結果なしで：

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />

私は通常、ちらつきなく他のサイトを開くことができます。
ブラウザはFirefox16.0.1です。

4

3 に答える 3

3

これmetaはIE専用であり、FFでは機能しません。

プレーンHTMLでのちらつきを防ぐことはできません。私が見つけた最善の解決策は、すべてのリンクをJavaScript呼び出しに置き換え、ページをAJAXでダウンロードしてから、ドキュメント自体を新しいコンテンツに置き換えることです。ページの更新は非常に高速で、ダウンロード中に空白の画面は表示されません。

基本的な機能は次のようになります。

function followLink(pageUrl) 
{ 
    jQuery.ajax({ 
        url: pageUrl, 
        type: "GET", 
        dataType: 'html', 
        success: function(response){ 
            document.getElementsByTagName('html')[0].innerHTML = response
        } 
    }); 
}

次に、次のリンクを置き換える必要があります。

<a href="mypage.html">Link</a>

と：

<a href="javascript:followLink('mypage.html')">Link</a>

これに関する詳細：HTMLドキュメント全体を置き換える] 1：jQueryを使用してHTMLドキュメントのコンテンツを置き換える方法とその影響（必ずしもそれほど明白ではありません）。

改善

このソリューションでは、ユーザーがJavaScriptを使用するように強制します。これが有効になっていない場合、ユーザーはリンクをクリックできなくなります。このため、フォールバックを提供します。まず、変更せず<a>に、（たとえば）のようなCSSクラスでそれらを装飾しますasync-load。hrefページのオンロードで、すべてを対応するものに置き換えます。次のjavascript:ようになります。

jQuery().ready(function() {
    jQuery("a.asynch-load").each(function() { 
        this.href = "javascript:followLink(\"" + this.href + "\")";
    });
});

これを使用すると、読み込みアニメーションも処理できます（実装方法は、yuoが使用しているものとレイアウトによって異なります）。さらに、同じ場所でフェードイン/フェードアウトアニメーションを提供できます。

最後に、この手法はフラグメントにも使用できることを忘れないでください（たとえば、共有ナビゲーションバーを提供し、ユーザーがナビゲーションバーのリンクをクリックしたときにコンテンツセクションが置き換えられる場合（したがって、すべてを再度ロードする必要はありません） 。

于 2012-10-29T13:43:31.953 に答える
3

体の背景を次のように変更するだけです。

body {
  background: url("Images/sky01.jpg") repeat scroll 0 0 #121210;
  font-family: Verdana,Geneva,sans-serif;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

背景色は、背景画像の読み込み中に白がちらつくのを防ぎます。

于 2012-10-29T14:02:20.880 に答える
1

最終的なページの読み込みが遅くなり、白の遷移時間が遅くなるため、画像を埋め込んでみてください

echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';
于 2014-04-12T13:58:17.777 に答える