1

リンク :: http://amatrans.com.previewyoursites.com/

以下のスクリプトはスライダー用に書かれており、Firefoxでは正常に動作しますが、Firefoxでは正常に動作しません

Chrome（マウスオーバーとマウスを離すと白いフラッシュが表示されます）および

IE (ホバー時の初回ロードが多すぎる)

誰でも私を助けることができます

<script type="text/javascript">
        jQuery(".slides li").each(function(){
            var oldurl =  jQuery(this).css('background-image');
            var imageUrl =  jQuery(this).find('.bw_img').html();
            jQuery(this).css('background-image', 'url(' + imageUrl + ')');
            jQuery(this).find('.bw_img').html(oldurl);
        }).mouseenter(function(){
            var oldurl =  jQuery(this).css('background-image');
            var imageUrl =  jQuery(this).find('.bw_img').html();
            jQuery(this).css('background-image', imageUrl);
            jQuery(this).find('.bw_img').html(oldurl);
        }).mouseleave(function() {
            var oldurl =  jQuery(this).css('background-image');
            var imageUrl =  jQuery(this).find('.bw_img').html();
            jQuery(this).css('background-image', imageUrl);
            jQuery(this).find('.bw_img').html(oldurl);
        });
</script>

（実際には、通常の黒い画像と、そのマウスオーバーで色付きの画像が必要です）

4

3 に答える 3

1

背景を変更するときにちらつきが発生しないように、非表示のコンテナーに画像を事前に読み込むことができます。

$(document).ready(function () {
    var container = $('<div id="preloader" />').css('display', 'none').appendTo($(document.body));
    $('<img />').src(imageUrl).appendTo(container);
});
于 2012-10-23T14:29:32.887 に答える
1

白黒画像を非表示にしてカラー画像を表示すると、フラッシュが発生するように見えます。大きな CSS 背景画像を使用しているため、これを回避するのは困難です。

絶対に配置されたインライン画像を使用するようにコードを再構築することをお勧めします。次に、白黒画像をまったく削除せずに、白黒画像の上にカラー画像を単純に表示できます。

于 2012-10-23T14:29:40.803 に答える
1

Konstantin reに同意します。画像のプリロード - 1 つのボトルネックになる可能性があります。<li>2 つ目は、すべての要素を反復処理してイベントを関連付けることで、多くのクロージャを作成していることです。jQueryonメソッドを使用したほうがよいでしょう。たとえば、次のようになります。

jQuery(".slides li").on("mouseenter", function() {
  // your mouseenter code
}).on("mouseleave", function() {
  // other code
});

これにより、メモリ効率が向上します。

編集：この特定のユースケースではCSSに頼ることができます：

.slides li:hover { filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}
于 2012-10-23T14:36:29.613 に答える