如何我避免圖像「跳」的時候我加載的圖像通過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

回答

相關問題