jQueryコードを最適化する

Question

イメージの上にいくつかのリンクがあるオーバーレイでフェードするjQueryコードを作成しました。私が見つけたのは、これらの画像を10枚追加すると痛いほど遅くなるということです。私は本当にこのコードをより速くするためのヒントやトリックに感謝します。

あなたも素晴らしいことだ私のHTMLとCSSのためのいくつかのヒントをお持ちの場合;）

jQueryのコード

$(document).ready(function() { 
var div = $(".thumb").find("div"); 
div.fadeTo(0, 0); 
div.css("display","block"); 
$(".thumb").hover(
    function() { 
     $(this).children(".download").fadeTo("fast", 1); 
     $(this).children(".hud").fadeTo("fast", 0.7); 
    }, 
    function() { 
     div.fadeTo("fast", 0); 
    } 
); 
}); 

私はあなたのコードを入れているすべてのコード

<style type="text/css"> 
a:active { 
    outline:none; 
} 
:focus { 
    -moz-outline-style:none; 
} 
img { 
    border: none; 
} 
#backgrounds { 
    font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif; 
    margin: 50px 0 0 0; 
    padding: 0; 
    width: 585px; 
} 
.thumb { 
    margin: 5px; 
    position: relative; 
    float: left; 
} 
.thumb img { 
    background: #fff; 
    border: solid 1px #ccc; 
    padding: 4px; 
} 
.thumb div { 
    display: none; 
} 
.thumb .download { 
    color: #fff; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    padding: 0 10px; 
} 
.thumb .download h3 { 
    font-size: 14px; 
    margin-bottom: 10px; 
    margin-top: 13px; 
    text-align: center; 
} 
.thumb .download a { 
    font-size: 11px; 
    color: #fff; 
    text-decoration: none; 
    font-weight: bold; 
    line-height: 16px; 
} 
.thumb .download a:hover { 
    text-decoration: underline; 
} 
.thumb .download .left, .thumb .download .right { 
    width: 44%; 
    margin: 0; 
    padding: 4px; 
} 
.thumb .download .left { 
    float: left; 
    text-align: right; 
} 
.thumb .download .right { 
    float: right; 
    text-align: left; 
} 
.thumb img, .thumb .hud { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 
.thumb .hud { 
    width: 100%; 
    height: 110px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #000; 
} 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
var div = $(".thumb").find("div"); 
div.fadeTo(0, 0); 
div.css("display","block"); 
$(".thumb").hover(
    function() { 
     $(this).children(".download").fadeTo("fast", 1); 
     $(this).children(".hud").fadeTo("fast", 0.7); 
    }, 
    function() { 
     div.fadeTo("fast", 0); 
    } 
); 
}); 
</script> 

<div id="backgrounds"> 


<div class="thumb"> 
    <div class="download"> 
    <h3>Download wallpaper</h3> 
    <p class="left"> 
    <a href="1024x768.jpg">1024x768</a> 
    <a href="1280x800.jpg">1280x800</a> 
    <a href="1280x1024.jpg">1280x1024</a> 
    </p> 
    <p class="right"> 
    <a href="1440x900.jpg">1440x900</a> 
    <a href="1680x1050.jpg">1680x1050</a> 
    <a href="1920x1200.jpg">1920x1200</a> 
    </p> 
    </div> 
    <div class="hud"></div> 
    <img alt="image" src="thumb.jpg"/> 
</div> 



</div> 

Answer 1

私はそれは単にホバー（..）内で次を変更することで少し良く対応するようになった：

function() { 
    $(".download", this).fadeTo("fast", 1); 
    $(".hud", this).fadeTo("fast", 0.7); 
    }, 
    function() { 
    $(".download, .hud", this).fadeTo("fast", 0); 
    } 

最大の違いは、必要にのみイベントターゲットにhoverout効果を適用していませんページのすべての部門に再度適用してください。 div要素を事前に選択

Answer 2

は、テストページに入れて、完璧に正直であっても、30人ほどであっても、それは大丈夫だと思っていました。私は実際に停止したものになるまでしばらく時間がかかりますが、確かにそれはあなたが望んだものでした。 「クリック」ではなく「ホバー」を使用してください（これは確実にスピードの問題を取り除きます）。

私はテストページで実際の画像を使用していません。代替テキストを取得していますので、ロードしているすべての画像ができるだけ小さなファイルサイズであることを確認してください。

Answer 3

事前に選択MORE

良い仕事。それはホバー上でそれをやってするのではなく、同様の要素でフェードを事前に選択したように、この方法を試してみてください：

$().ready(function() { 
    var div = $(".thumb").find("div"); 
    div.fadeTo(0, 0); 
    div.css("display","block"); 

    $(".thumb").each(function() { 

     var download = $(this).children(".download"); 
     var hud = $(this).children(".hud"); 

     $(this).hover(
     function() { 
      download.fadeTo("fast", 1); 
      hud.fadeTo("fast", 0.7); 
     }, 
     function() { 
      div.fadeTo("fast", 0); 
     } 
    ); 

    }); 

    }); 

Answer 4

削除してみてください：フォーカスを{ -moz-アウトラインスタイル：なし。 } 何が起こるかを見てください