При смене картинки фона на странице идет белый кадр , как будто не прогружается заранее фон, как решить?

168

29 декабря 2019, 17:20

$(".on").click(function() { 
  $(".main").toggleClass("main__night"); 
});

.main { 
  background: url(../img/daybackground.png) no-repeat center top; 
} 
 
.main__night { 
  background: url(../img/nightbackground.png) no-repeat center top; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="main" id="main"></div>

Answer 1

Если есть возможность, можете использовать одну картинку, состоящию из двух.
Например как эта:

А там уже изменяем background-position.
Ниже пример:

$('input[type="button"]').on('click', function(){ 
  $('.block').toggleClass('active'); 
});

.block { 
  display: block; 
  width: 225px; 
  height: 150px; 
  background: url('https://i.stack.imgur.com/FpEZQ.png') no-repeat top center / auto 200%; 
} 
 
.block:not(.active) { 
  background-position: top center; 
} 
 
.block.active { 
  background-position: bottom center; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="block"></div> 
<input type="button" value="toggle">

Answer 2

Ужать картинку. Судя по тому, что у Вас png, она слишком много весит и долго грузится. Вот пример с обычным jpg - Ваш код прекрасно работает, безо всяких белых кадров:

$(".on").click(function(){ 
  $(".main").toggleClass("main__night"); 
});

div { 
  height: 600px; 
} 
.main { 
    background: url(https://avatars.mds.yandex.net/get-pdb/33827/eb1233b6-e0c6-4025-b5f9-d9c0b163fcae/s1200) no-repeat center top; 
} 
.main__night { 
    background: url(https://avatars.mds.yandex.net/get-pdb/989257/686ff985-8427-41f2-820a-f1280233f97c/s1200) no-repeat center top; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="on">click</button> 
<div class="main" id="main"> 
</div>

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Откуда этот обьект proto?

Не могу понять, вот у нас есть функция-конструктор, дальше я создаю сам экземпляр этого конструктора

135

javascript

Автоматические бэкапы всех баз данных MongoDB

Использую для работы с MongoDB NodeJS на Windows Server 2012Бывало такое, что, при изменении настроек MongoDB, все базы данных удалялись, а бэкапов для восстановления...

171

javascript