Как сделать так, чтобы изображение всегда отображалось сверху вниз при загрузке после динамического изменения sr c?

Question

В следующем первом примере изображение stati c отображается при загрузке сверху вниз, как и ожидалось.

Первый пример

В следующем втором примере изображение является пустым GIF 1x1 в начале. Однако после того, как src динамически изменяется на src изображения, использованного в первом примере, оно вообще не рендерится до полной загрузки.

Второй пример

В чем причина несоответствия в рендеринге в двух примерах? И как заставить изображение во втором примере рендериться сверху вниз, когда оно загружается, как изображение в первом примере?

---

^{Атрибуция: Источник используемого изображения .}

Answer 1

В темные времена коммутируемого доступа мы использовали метод принудительного принудительного добавления изображений в кэш путем создания нового объекта изображения для любого из объектов, на которые мы будем переходить.

Пример:

<script>
  var jupiterImg = new Image('images/jupiter.png');
  var saturnImg = new Image('images/saturn.png');
</script>

Сделайте это на ранней стадии, как в голове вашего HTML, и вам не придется ждать загрузки изображений вообще, поэтому вам будет все равно, если это сверху вниз, слева от правильно, или что-то еще полностью.