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

나는 단순히 호버 (..) 내에서 다음과 같이 변경하여 조금 더 나은 응답있어 :

가장 큰 차이점은 이벤트 대상에 hoverout 효과를 적용에서 오는

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

, 필요 없습니다 페이지의 모든 div에게 다시 적용하십시오. 사업부를 미리 선택

Answer 2

내가 코드를 넣었습니다 테스트 페이지에 들어가서 솔직히 말해서 심지어 30 대 정도의 divs라도 괜찮은 것처럼 보였습니다. 제 대답으로 사용하기에 충분했습니다. 그 (것)들의 낱단에 쥐 미끄러지는 것은 나가 위에 실제로 멈추는 것을 얻을 때까지 나는 모두를 통해서가는 롤오버 효력을 기다려야 한 ㄴ다는 것을 의미한다, 그러나 확실하게 저것은 당신이 " '클릭'보다는 '마우스 오버'를 사용합니다 (속도 문제를 확실히 제거 할 수 있음).

내 테스트 페이지에서 실제 텍스트를 사용하지 않고 대체 텍스트를 가져 오는 중이므로 지금 가장 좋은 추측은로드하려는 모든 이미지가 가능한 작은 파일 크기인지 확인하는 것입니다.

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-개요 스타일 : 없음; } 무엇이 발생하는지 확인하십시오