Загруженное фоновое изображение мерцает

Question

Я сохраняю все javascript для своего сайта в одном огромном файле - my_scripts.js. На всех страницах я откладываю загрузку этого файла (используя встроенный javascript). Это последнее, что загружается.

Потому что для моего тела HTML я использую большое фоновое изображение, я подумал, что неплохо также отложить загрузку этого изображения. Из моего класса тела Css я удалил эту часть: background-image: url('my_background.jpg');

Тогда как первая линия моего my_scripts.js Я добавил это: document.body.style.backgroundImage = "url(my_background.jpg)";

Теперь CSS необходимо, чтобы показать фоновое изображение добавляется в моем основные стиль с javascript. Работает, большие фоновые нагрузки после загрузки всего остального.

Но: когда я перемещаюсь между страницами, фоновое изображение мерцает. Он загружается каждый раз. Что я делаю не так? my_scripts.js должен находиться в кеше браузера! Почему мерцание?

EDIT: Еще мерцает, если я предварительно загрузить изображение с

if (document.images) { 
img1 = new Image(); 
img1.src = "my_background.jpg"; 
} 

Answer 1

Использование background-image:url('my_background.jpg)"; вместо document.body.style.backgroundImage = "url(my_background.jpg)";, потому что, просто, ваше правило CSS работал без мерцания. Просто.