如何我避免图像“跳”的时候我加载的图像通过javascript

我有一个数字，排列在一起的相对使用CSS图像等如何我避免图像“跳”的时候我加载的图像通过javascript

我有这样的代码在一个JavaScript功能变更后一个选择下拉菜单：

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

的问题是，当图像被下载，该图片排序“跳”了一下的休息和搬过来和他们，他们搬回一旦图像被下载到客户。

所以它看起来很好，一旦形象已经下载，但我要拿出一个办法来避免“jerkyness”在过渡期间。

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

来源

2011-09-17 leora

或者，图像加载到一个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";

来源

2011-09-17 01:43:18 jfriend00

您需要设置img的宽度和高度。浏览器试图补偿图像（因此是“急躁”），但如果不知道图像需要多少空间，它不能顺利进行。

来源

2011-09-17 01:01:24

在2017年仍然相关... – rhysclay

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

来源

2011-09-17 01:03:46 Shamoon

将图像初始设置为透明图像然后切换它有什么意义？ –

尝试设置只图像元素上的src属性类似指出。如果它正在重新计算旧的图像属性，它可能不会首先将其消除。

来源

2011-09-17 01:12:51 rlemon

如何我避免图像“跳”的时候我加载的图像通过javascript

回答

相关问题