2017-08-03 17 views
0

これはよくある問題だと私は知っていますが、私は役に立たない多くの提案された解決策を試しました。私が達成しようとしているのは、画像がページの読み込みにフェードインすることです(消えてからフェードアップするまで少しずつ表示されることなく)。私が何を読んでから、フェードする前に簡単なフリッカーのために表示されるJqueryイメージ

、フェードインが行われるまで、それが読み込まないよう、最初にCSSを使って画像を非表示にすることをお勧めします:

#imgfade { 
    display: none; 
    } 

私は削除した場合ので、私は、この作業を知っていますJquery、画像は表示されません。 jQueryのコード:私も試した

$("#imgfade").fadeIn(600); 

$("#imgfade").hide().fadeIn(600); 

それは主に動作しますが、別のサイトを訪問したときに、その後、戻って、ちらつきが発生します。時には前後に進んで8/10回動作し、その後点滅することがあります。

私は無駄に(適切なマッチングjQueryを使って)このCSSをも試してみた:

#imgfade { 
opacity: 0; 
} 

私は、これは、ブラウザのキャッシュをどうするかもしれ疑いますか?

ブートストラップ3を使用していますが、ブートストラップ(および他の)CSSページがロードされた後(上記のセクション内)にカスタムCSSが表示されます。

誰も、このような事態を避けるために完全にばかばかしい方法を推奨することはできますか? 他のページのテキストでも同じ問題が発生しています。

事前に感謝します。

+0

正しくやっています。ページ全体をリロードすると正常に動作しますが、戻ってくるとコードが再び実行され、0からフェードします。すばやく修正すると、隠れていると消えてしまいます。 –

+0

CSSファイルが読み込まれる前にページHTMLが読み込まれている可能性があります。ドキュメントの ''に '#imgfade {display:none}'を移動してみるか、スタイルをイメージ自体にインライン展開してみてください。 – Blazemonger

+0

ありがとう、よく知っておいてください。どのアイデアをどのように戻ってきたときにちらつきを停止するには?私は、これを防ぐための "ハック"や代替方法があるのだろうかと疑問に思っています。Blazemonger:Display:noneコードは、別のCSSファイルではなく、この理由でドキュメントのにあります。 – BSUK

答えて

0

私はこの問題の解決策を見つけたと信じています。これは毎回私のために100%働いているようです。
うまくいけば、これは他の誰かを助けるかもしれない:

でjQueryのフェードインのコードを配置は非常に(/ htmlの前に、後に/ボディ、)HTMLのを終了するには、いくつかの理由で問題を解決するようです。

私は本当に理由を理解できませんが、DOMの読み込み順序に何らかの形で関係していると推測できます。おそらく、これは、CSSのチャンスが正しく読み込まれるようにしています(div要素が実際に隠されていることを確実にする)前にフェードインしようとしています。

関連する問題