javascript - 不确定为什么 jQuery .animate 会使浏览器崩溃

Question

我有一个网站，主页上包含大量图像缩略图(目前约为 500 个)。每个图像都很小，大约 200 像素 x 150 像素(但具有不同的长宽比)。文件大小也很小(每个约为 10-20k)。

我有两个按钮来调整缩略图的可见大小(大:200 像素高度和小:100 像素高度)。

我决定使用 jQuery .animate 函数和 0 秒的动画来调整它并保持每个图像的比例:

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

由于某种原因，这会导致浏览器无响应并导致页面崩溃。是图片数量多的原因吗？我本来打算实现延迟加载以减少页面上的图像，但不再支持延迟加载。我也可以编写新的 js 来执行此操作，但我很困惑为什么 animate 函数不支持此功能。

这是存在问题的开发网站: http://selfportraitproject.com/dev/

任何帮助将不胜感激。

Answer 1

您是否尝试过使用height: '100px'？这将是正确的语法，尽管我不知道为什么这会导致浏览器崩溃。

同时以 0 的持续时间调用 .animate 与仅设置 css 相同，因此只需使用 .css 即可会表现得更好。