当我通过javascript加载图像时如何避免图像“跳跃”答案

【问题标题】：how to I avoid images "jumping" when i load an image via javascript当我通过javascript加载图像时如何避免图像“跳跃”
【发布时间】：2011-09-17 09:43:18
【问题描述】：

我有许多使用 css 等相对排列在一起的图像。

更改选择下拉列表后，我在 javascript 函数中有此代码：

$("#imagePlaceholder").html("<img src='/Content/Images/image1.png' />");

问题在于，在下载图像时，其余图像有点“跳跃”并移动，一旦图像下载到客户端，它们就会向后移动。

所以图像下载后看起来不错，但我想想出一种方法来避免过渡期间的“抖动”。

对此有标准方法或最佳实践吗？

【问题讨论】：

标签： jquery image

【解决方案1】：

您需要设置img 的宽度和高度。浏览器正在尝试补偿图像（因此是“抖动”），但在不知道图像需要多少空间的情况下无法顺利完成。

【讨论】：

【解决方案2】：

或者，将图像加载到 javascript 图像对象中，并且在加载之前不要将它们插入到页面中。如果您不提前知道图像的大小，这可能会更好。

var img = new Image();
img.onload = function () {
    // after it's loaded successfully here, 
    // you can insert it into the DOM with no jerkiness
}
img.src = "xxx";

【讨论】：

【解决方案3】：

您需要在任何动态加载之前设置$("#imagePlaceholder") 的高度和宽度。此外，你最好让img 有一个带有空白图像（透明 1x1 像素）的id，然后简单地使用：$("#imgId").attr("src","newimage.png");

【讨论】：

先把图片设置成透明图片然后再切换有什么意义？

【解决方案4】：

尝试只在图像元素上设置 src 属性，如前所述。如果它正在重新计算旧的图像属性，它可能不会先将它们清空。

【讨论】：