Блог

У меня есть несколько lt;imggt; тегов и некоторые lt;divgt; теги, 'background: url('example.jpg'); и я хочу подождать, пока эти изображения не будут загружены, и не выполнять следующий код javascript, пока эти изображения не будут загружены и загружены. Поэтому только после того, как я смогу вызвать функцию для деактивации загрузчика моего сайта и продолжать добавлять другие сценарии для анимации и прочего…

PS: Я не хочу ждать, пока не будут загружены все изображения, потому что это займет слишком много времени, я просто хочу, чтобы некоторые изображения (например, первый фон) были загружены до того, как я отключу загрузчик своего веб-сайта…

Вы можете сначала загрузить его в память, а затем применить к элементу

 var img = new Image(); img.onload = function() {  console.log('image loaded');  document.querySelector('div.bg').style.backgroundImage = `url(${img.src})` } img.src = "https://picsum.photos/200/300?"   new Date().getTime(); 

 div.bg {  height: 500px;  width: 600px;  background: #000;  background-repeat: no-repeat;  background-position: center;  background-size: cover; } 

 lt;div class='bg'gt;lt;/divgt; 

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

Мои результаты поиска пришли с пустыми руками на ваш конкретный вопрос, так что вот что бы я сделал, если бы был уверен, что там ничего нет:

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

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