jQuery .animate가 브라우저를 충돌시키는 이유를 알 수 없음

Question

홈페이지에 많은 이미지 미리보기 이미지 (현재 ~ 500)가있는 사이트가 있습니다. 각 이미지는 약 200x150 픽셀 크기이지만 크기는 작지만 가로 세로 비율은 다릅니다. 또한 파일 크기가 작습니다 (각각 약 10 ~ 20k).

두 개의 버튼을 사용하여 미리보기 이미지의 크기를 조정할 수 있습니다 (큼 : 200px 및 작은 : 100px 높이).

나는이 문제를 조정하고 각 이미지의 비율을 유지하기 위해 애니메이션 0초와 jQuery를 .animate 기능을 사용하기로 결정 : 어떤 이유로

$('#small_thumbnails').click(function(){ 
    $('.thumbnail').animate({height: '100'}, 0); 
    return false; 
}); 

이 응답하지 브라우저를 일으키는

와 충돌 페이지. 그것은 많은 수의 이미지 때문입니까? 페이지의 이미지를 줄이기 위해 lazyload를 구현하려고했지만 lazyload는 더 이상 지원되지 않습니다. 나는 또한 이것을하기 위해 NEW js를 작성할 수 있지만 애니메이션 기능이 불가능한 이유에 대해 혼란스러워합니다. 어떤 도움을 크게 감상 할 수 http://selfportraitproject.com/dev/

: 여기

문제를 가지고 dev에 사이트입니다.

Answer 1

height: '100px'을 사용해 보셨습니까? 이것이 브라우저를 왜 망칠지는 모르지만 올바른 구문입니다.

0의 .animate으로 전화를 걸면 그냥 CSS를 설정하는 것과 동일하므로 대신 .css을 사용하면 훨씬 효율적으로 작동합니다.