Optimisation du code jQuery

Question

J'ai écrit ce code jQuery qui s'estompe dans une superposition avec des liens sur une image. Ce que j'ai découvert c'est que c'est terriblement lent quand j'ajoute 10 de ces images. J'apprécierais vraiment quelques trucs et astuces pour rendre ce code plus rapide.

Si vous avez quelques conseils pour mon HTML et CSS qui serait trop grand;)

Code 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); 
    } 
); 
}); 

Tout le code

<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

Je l'ai pour répondre un peu mieux en changeant simplement les éléments suivants dans le vol stationnaire (..):

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

La plus grande différence vient seulement d'appliquer l'effet de hoverout à la cible de l'événement, pas besoin de réappliquer à tous vos divs sur la page.

Answer 2

J'ai mis votre code dans une page de test et d'être parfaitement honnête, même avec une trentaine de .thumb divs cela semblait ok - certainement assez réactif pour utiliser de mon côté. Glisser la souris sur un tas d'entre eux signifie que je dois attendre que l'effet de retournement les traverse tous, ce qui prend un moment avant d'arriver à celui sur lequel je me suis arrêté, mais c'était sûrement ce que tu voulais. re utilisant 'hover' plutôt que 'click' (ce qui éliminerait certainement tout problème de vitesse). Je n'utilise pas d'images réelles dans ma page de test, je reçois simplement le texte alt, donc ma meilleure estimation actuelle serait de s'assurer que toutes les images que vous chargez sont aussi petites que possible.

Answer 3

Pre-Select Plus

Bon travail présélectionnant le div. Essayez de cette façon afin que présélectionne le fondu des éléments aussi bien au lieu de le faire sur le vol stationnaire:

$().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

essayez de supprimer le : focus { -moz-outline-style: none; } et voir ce qui se passe