Optimieren Sie jQuery-Code

Question

Ich habe diesen jQuery-Code geschrieben, der in einem Overlay mit einigen Links über ein Bild eingeblendet wird. Was ich herausgefunden habe ist, dass es schmerzhaft langsam ist, wenn ich 10 dieser Bilder hinzufüge. Ich würde wirklich einige Tipps und Tricks schätzen, wie man diesen Code schneller macht.

Wenn Sie einige Tipps für meine HTML und CSS, die zu groß sein würde;)

jQuery-Code

$(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); 
    } 
); 
}); 

der gesamte 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

Ich habe es ein wenig besser zu reagieren, indem sie einfach den folgenden im Hover-Wechsel (..):

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

Der größte Unterschied von nur kommt den hoverout Effekt auf das Ereignisziel Anwendung, keine Notwendigkeit, Wenden Sie sich erneut an alle Ihre divs auf der Seite.

Answer 2

Ich habe Ihren Code setzen in eine Testseite und um ganz ehrlich zu sein, sogar mit dreißig oder so .thumb divs schien es in Ordnung - sicherlich reaktionsfähig genug, um von meinem Ende zu verwenden. Wenn ich mit der Maus über einen Haufen fahre, muss ich darauf warten, dass der Rollover-Effekt sie alle durchläuft, was eine Weile dauert, bis es zu dem kommt, auf dem ich tatsächlich aufgehört habe. Verwenden Sie "Hover" anstatt "Klick" (was sicherlich Geschwindigkeitsprobleme entfernen würde).

Ich benutze keine tatsächlichen Bilder in meiner Testseite, nur den Alt-Text, so meine beste aktuelle Vermutung wäre sicherzustellen, dass alle Bilder, die Sie laden, sind so kleine Dateigröße wie Sie sie möglicherweise machen können.

Answer 3

Pre-Select MEHR

Gute Arbeit die div Vorwählen. Versuchen Sie, diese Art und Weise, so dass es die Fade-in-Elemente einer Vorauswahl als auch anstatt es auf schweben zu tun:

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

versuchen Entfernen den : focus { -moz-outline-style: none; } und sehen, was passiert