как избежать "скачка" изображений при загрузке изображения через JavaScript

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

попробуйте установить только атрибут src для элемента изображения, как отмечено.если он пересчитывает старые свойства изображения, возможно, он сначала не очистит их.

Answer 4

Вам необходимо установить высоту и ширину $("#imagePlaceholder") перед любой динамической загрузкой. Кроме того, вам лучше иметь img, иметь id с чистым изображением (прозрачный 1x1 пиксель) и затем просто использовать: $("#imgId").attr("src","newimage.png");