1

テキストフィールドを監視するために、キーボードのキーアップごとに機能を実行しています。

入力に応じて、jqueryを使用しています.removeClass("classwithBGImage").addClass("classwithnewBGimage")

これはうまく機能しています。最初の読み込みで背景画像がちらつくことを期待してください。

Javascript と CSS を使用して画像をプリロードしようとしましたが、スプライトを使用しようとしましたが、.removeClass("classwithBGImage").addClass("classwithnewBGimage")トリガーされたときに最初のロードで常にちらつきがあります。

更新: 文書化されたクロムのバグのようです: http://code.google.com/p/chromium/issues/detail?id=102706

このjsfiddleで目撃されているように：http://jsfiddle.net/QpvUQ/2/

何か案は？とても有難い。

4

4 に答える 4

1

背景画像をdiv配置された絶対に適用し、 left:-99999px.

#preload{
   background-image : url(large-image.png);
   position:absolute;
   left:-99999px;
}

後で、実際のdivに使用します

.classwithnewBGimage{
  background-image : url(large-image.png);
}

これは、実際に画像を使用するときに時間がかからないように、画像を事前に読み込むための私が知っているハックの 1 つです。

また、.removeClass()引数なしでは何もしません。ちらつきを避けるには、スムーズなトランジションを使用してください。

.stylesWithoutImage{
 ///
}

.classwithnewBGimage{
//img
}

于 2012-08-31T19:03:36.417 に答える
1

Move.jsを使用すると、CSS の変更をアニメーション化できます。

move('.box')
  .set('background-image', 'url(img)')
  .end();

PS：試していませんが、CSSをアニメーション化できると言われています。

于 2012-08-31T20:57:39.757 に答える
0

他の誰かが同じ問題に遭遇した場合に備えて、問題を把握しました。

プリロードを使用すると、画像はプリロードされますが、多くのブラウザーは依然として画像に対して 304 応答を受け取り、最初の読み込みでちらつきが発生します。Rails アプリケーションの場合、ブラウザに強制的に画像をキャッシュさせることができます。

Rails 3.1 の開発モードで画像キャッシュを有効にする

于 2012-09-10T20:41:51.957 に答える
0

あなたのjsfiddleと同じことをするために、CSSだけで実装しました。

使い方？

.class {
  background: url(...);
}

.class:hover {
  background: url(...);
}

JavaScript で行う必要がある場合は JS コードを残しましたが、CSS だけで十分です。

http://jsfiddle.net/QpvUQ/7/

于 2012-09-04T17:04:18.383 に答える