Javascript 缩放图像会导致临时抖动

这可能是一个重复的问题；我不知道该怎么说，所以我找不到答案

我使用jQuery在页面加载时弹出一个图像。看

问题是，当图像达到其最终大小时，边缘会在一两秒钟内抖动/粗糙，然后变得平滑。到目前为止，我在Safari和Firefox中都注意到了这一点。以下是动画的代码：

$(document).ready(function() {
    $("img").animate({
        opacity: 1,
        width: "300px",
        height: "300px"
    }, 400, "swing", function() {
        $("img").animate({
            width: "200px",
            height: "200px"
        });
    });
});

我使用的是512px乘512px的PNG图像，可以从10乘10缩小到300乘300

---

将PNG图像转换为SVG格式会解决这个问题吗，或者至少会让它变得不那么明显？最新的浏览器支持SVG图像吗？

您确定这不是“渐进扫描”的产物，并且图像在加载时仍在缩放吗？在我的Chrome浏览器上，我想我在第一次加载时看到了效果，但在后续加载时，图像已经在缓存中。好的-在Safari中尝试-我明白你的意思-抗锯齿不会立即应用。这不是解决问题的方法，但你应该考虑使用CSS3转换来解决这个问题。与使用jQuery相比，对于功能较弱的设备（移动设备），它们更轻、更平滑。请看这里的一个简单示例