Как загружать фотографию в фоне, не потребляя много ресурсов?

Question

[Илья]

У меня есть Raspberry Pi, на нем открыта web страница через chromium, на ней слайдер с фотографиями, которые находятся в памяти.
И часы с секундами(через setInterval каждую сек).
Вариант 1
Если менять src у img сразу на новую картинку, во время загрузки картинки часы зависают секунд на 5-6 + видно как картинка загружается (появляется частями).
Вариант 2
Если создать img через js, задать ему src, и после загрузки фото, поменять в слайдер, то картинка в слайдере поменяется почти сразу, но секунды тоже пропускаются.

Цп не нагружается на 100% и озу тоже есть свободное, проблема в памяти, он долго грузит из неё.
Как можно загружать картинку из памяти, но при этом что бы часы не останавливались (не использовались все ресурсы, а оставались под другие нужды)?

Главная задача, во время загрузки новой фотографии, оставить ресурсы для работы часов

Answer 1

[iBird Rose]

гугли в сторону lazyload

Answer 2

[Anton fon Faust]

Загружайте в невидимые элементы dom, а потом просто меняйте видимость.
Как будет быстрее, через opacity или display:block - нужно выяснить экспериментальным путем.
Была похожая проблема в safari, решилась через opacity.

Comments

[Илья]

Во втором варианте и был описан этот метод, суть вопроса заключается в том что бы при загрузки фотографии оставить ресурсов под работу часов.

[Anton fon Faust]

Илья:

Так весь вопрос в том, как вы это делаете.
Если просто подменяете элемент dom или меняете src у img как раз такое поведение и будет, особенно если изображения большие.
Сделайте по аналогии:

<div id="my">
<img id="img1" src="1.jpg">
<img id="img2" src="2.jpg">
<img id="img3" src="3.jpg">

#my img {
opacity:0;
}

var img1=document.getElementById("img1");
img1.style.opacity=1;

Замена opacity:0; на opacity:1; не должна так таймер тормозить.

Можно, конечно, еще попробовать с вебворкерами и requestAnimationFrame, но мое решение попроще.

p.s.
К сожалению, с Raspberry Pi знаком только по картинкам в интернете)