Я использую слайд-шоу Vegas Background на веб-сайте http://www.freetimemagazine.net, но начальное время загрузки слишком велико, и вы видите черный фон без элементов слишком долго. Я хотел бы поместить неподвижное изображение фона, которое не является частью слайдера, но оно появляется только в начальный момент загрузки. Я попытался установить фон тела, но ничего не получил, я попытался установить в js плагин "задержка" быстрее для первого изображения слайдера, но я ничего не получил... Как установить начальную/изображение по умолчанию?
Ниже приведен код, который управляет слайд-шоу:
1) theme.js
/**
* Vegas background image slider
*/
$.vegas('slideshow',
{
// delay: 5000,
backgrounds: [
{ src: 'img/home/01.jpg', delay: 100, fade: 100 },
{ src: 'img/home/02.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/03.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/04.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/05.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/06.jpg', delay: 5000, fade: 2000 },
// { src: 'img/home/07.jpg', fade: 2000 },
{ src: 'img/home/08.jpg', delay: 5000, fade: 2000 },
// { src: 'img/home/09.jpg', fade: 2000 },
{ src: 'img/home/10.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/11.jpg', delay: 5000, fade: 2000 },
// { src: 'img/home/12.jpg', fade: 2000 },
{ src: 'img/home/13.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/14.jpg', delay: 5000, fade: 2000 },
{ src: 'img/home/15.jpg', delay: 5000, fade: 2000 }
]
})('overlay');
2) style.css
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-size: 1.4rem;
color: #292929;
background: #000; }
Я не уверен, что вы это уже поняли, но все, что вам нужно сделать, это добавить фоновое изображение в тело вашего сайта.
body {background: url('../img/yourimage.jpg') 0 0 no-repeat; background-size: cover;}
Вы также можете рассмотреть возможность оптимизации изображений. Если вы пытаетесь загружать большие изображения, они могут занять больше времени, но не только, но пользователи не посещают ваш сайт, чтобы подождать вокруг фона, и это может создать плохой UX.
Попытайтесь добавить это:
$.vegas(
{ src: 'img/home/01.jpg' }
);
До
$.vegas('slideshow', {
backgrounds: [
...