Как заменить фоновое изображение веб-страницы в Javascript перед ее загрузкой?

Question

В настоящее время я переписываю CSS веб-игры, которую я играю, чтобы дать более приятный пользовательский интерфейс. Единственное, с чем я испытываю трудности, - это правильно заменить фоновое изображение, поскольку исходное фоновое изображение загружается на экран, прежде чем скрипт заменит его на сплошной цвет. Твердый цвет, который я заменяю его нагрузками, но только после загрузки страницы.

Here is a gif of the issue I am running into.

Я попытался с помощью document.onload, .onDomContentLoaded, .ready и т.д., но по какой-то причине ни один из них работают. Есть ли способ предотвратить фоновое изображение от загрузки до запуска скрипта?

Answer 1

window.onload будет ожидать загрузки всех ресурсов.

Однако, похоже, что вы должны просто добавить элемент background-color к элементу и позволить второму изображению под ним.

Answer 2

Вы пробовали недвижимость как важную? background-color: gray !important
Я думаю, что это должно предотвратить изображение показывать вверх на всех

Answer 3

Место это в внешний файл Javascript, и сделать запрос на него, прежде чем что-либо еще в вашем head.

var myImage = new Image(); 
myImage.src = 'your_image_here'; 

Что происходит, так это то, что внешний Javascript-файл блокирует рендеринг страницы. И сам сценарий не закончится до загрузки изображения. Таким образом, когда вы переключаете фон, не будет никакой задержки.

Answer 4

Вы могли бы использовать:

document.style.backgroundImage = "URL ('img.png')";

Answer 5

Я считаю, что AmmarCSE намекает на возможный ответ, но причина неизвестна.

Вы должны сначала просмотреть свой HTML-код для заказа, в котором загружены ваши ресурсы. CSS является загруженным ресурсом и может указывать цвета фона и изображения. Это, возможно, объяснит следующее:

Если ваш CSS указывает цвета/ресурсы изображения, а HTML загружает ресурс CSS до выполнения ваших функций документа, вы будете продолжать получать такое поведение.

---

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

Это предположение о проблеме. Вы должны предоставить некоторые HTML, JavaScript и CSS в своем исходном сообщении, чтобы помочь другим ответить и просмотреть.