Прогрузка картинок на сайт при использовании библиотеки python eel

Question

Делаю небольшую программу и хочу сделать сменяемый фон, который будет браться из директории программы bg и не важно, какое будет кол-во картинок, оно будет само подгружать их кол-во ( len([name for name in os.listdir(DIR) if os.path.isfile(os.path.join(DIR, name))]) ). При запуске, запускается локальный хост localhost:(любой свободный порт). И он уже не может пройти по директории bg, как можно это обойти, или можно сделать какой нибудь прелоад картинок.

Пробовал так же и через python обращаться к функции из js с прогрузкой (document.head.insertAdjacentHTML("afterbegin", `<link rel="prefetch" href="bg/`+count+`.jpg">`);), но это уже слишком поздно

Answer 1

И такс, начну с структуры проекта:

main.py
site-----|img----|1.jpg
                 |2.jpg
         |index.html
         |style.css
         |script.js

Теперь идут коды:

main.py:

import eel
eel.init('site')
eel.start('index.html')

index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Это моя программа</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <p class='toogleParagraph' id='gg'>Вот туты должна меняться картинка</p>
    </div>
    <script src='script.js'></script>
</body>
</html>

style.css:

#gg{
    background-image: url(img/1.jpg);
    color: chocolate;
    width: 100%;
    height: 900px;
}
#bg{
    background-image: url(img/2.jpg);
    color: chartreuse;
    width: 100%;
    height: 900px;
}

script.js:

function toogleBackground(){
 let element = document.getElementsByClassName("toogleParagraph")[0];
    if(element.id == 'gg'){
        element.id = 'bg';
    }else{
        element.id = 'gg';
    };
};

setInterval(toogleBackground, 1000);

И так. Про py, html и css объяснять не буду, а вот js поясню.

Я сделал функцию, которая работает для смены картинок. Картинки все заданы id в css и делая смену id у элемента p я меняю цвет текста и фоновую картинку. Далее я всё запихнул в setInterval, чтобы картинка и цвет менялись каждую секунду.

Ну, и остаётся только результат

БЛОГ НА HUSL