CODEWITHSUNDEEP
javascriptjquerycrashjquery-animate
RANGER
RANGER

Reputation: 1691

Unsure why jQuery .animate is crashing browser

I have a site housing a good deal of image thumbnails (currently ~500) on the homepage. Each image is small, about 200px by 150px (but have different aspect ratios). Also small in file size (each is about 10-20k).

I have two buttons to adjust the visible size of the thumbnails (large:200px height and small:100px height).

I decided to use the jQuery .animate function with 0 seconds for the animation to adjust this and keep the ratio of each image:

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

This for some reason is causing browsers to become unresponsive and crashes the page. Is it due to the large number of images? I was going to implement lazyload to cut down on the images on the page but lazyload is no longer supported. I could also just write NEW js to do this but am confused as to why the animate function is not capable.

Here is the dev site that has the issue: http://selfportraitproject.com/dev/

Any help would be greatly appreciated.

Upvotes: 0

Views: 467

Answers (1)

Martin Jespersen
Martin Jespersen

Reputation: 26183

Have you tried to use height: '100px' ? That would be the correct syntax, although i don't know why this would crash the browser.

Also calling .animate with a duration of 0 is the same as just setting the css, so just use .css instead, it will perform a lot better.

Upvotes: 1

Related Questions