Question

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

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

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

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

一旦图像下载，它看起来很好，但我想想出一种方法来避免过渡期间的“混蛋”。

有没有标准的方法或最佳做法？

Answer 1

您需要设置img的宽度和高度。浏览器正在尝试补偿图像（因此称为“急动”），但如果不知道图像需要多少空间，它就无法顺利完成。

Answer 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";

Answer 3

您需要在任何动态加载之前设置$("#imagePlaceholder")的高度和宽度。此外，您最好让img的{{1}}包含空白图片（透明的1x1像素），然后只需使用：id

Answer 4

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

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

4 个答案: