0

チェックボックスを画像に切り替えましたが、チェックボックスの1つを押すと、チェックされた画像が表示されるまでに2秒かかります。

これは、チェックボックスを最初に押したとき、2番目などにのみ発生しました。完璧に機能します。

おそらく、img が Web サイトのメモリに読み込まれたら、チェックボックスをオンにすると、スムーズに動作します。

そのための解決策はありますか？おそらく、ページが読み込まれると、そのメモリなどにオプションの img を読み込むことができます。

前もって感謝します。

これは私のウェブサイトです。ヘブライ語ですが、内容は関係ありません。

私は Gravity Form を使用していますが、この場合は問題ありません。コードのサンプルは以下のとおりです。すべての団体に感謝します。

.DesignCheckBox label {
                   background-repeat: no-repeat;
                   border: 2px solid #DDD;
                           height: 150px!important;
                           font-size: 150%;
                           -moz-border-radius: 20px;
                           -webkit-border-radius: 20px;
                border-radius: 20px; 
                -khtml-border-radius: 20px; 
                                                  }
.DesignCheckBox label:hover {
                   border: 2px solid #000095;
                           background-color:  #F0F7F7;
                           cursor: hand; cursor: pointer;
                                                  }

.HideCheckBox input[type="checkbox"]{display:none!important;}

         li.gchoice_4_1 label {
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/XCellcom.gif);
                               }

         li.gchoice_4_1 input[type="checkbox"]:checked + label { 
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/VCellcom.gif);
                       }

         li.gchoice_4_2 label {
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/XOrange.gif);
                               }

         li.gchoice_4_2 input[type="checkbox"]:checked + label { 
                       background-image: url(http://doarna.com/wp-content/uploads/2012/09/VOrange.gif); 
                       }
4

1 に答える 1

0

実際、ブラウザは、ページの読み込み時にページが提供する必要がある画像のみを読み込みます。必要な画像をダウンロードする以外の他のイベントが発生し、ダウンロードされるとブラウザのキャッシュに保存されます。これは、イメージが現在ローカル マシン上にあるため、次回は応答が速くなることを意味します。

ここで提案するのは、画像を非表示にするために、display equals none を使用することです。ページの読み込み時に、チェックされた画像に対して表示なしを設定し、クリック時にチェックされた画像に対して表示をブロックに設定します。

スニペットが必要な場合は、コードを入力してください。

于 2012-09-30T09:26:47.120 に答える