Плагин Vegas Background JQuery

0

Я использую слайд-шоу 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;  }
Теги:
plugins
background
slider

2 ответа

0

Я не уверен, что вы это уже поняли, но все, что вам нужно сделать, это добавить фоновое изображение в тело вашего сайта.

body {background: url('../img/yourimage.jpg') 0 0 no-repeat; background-size: cover;}

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

0

Попытайтесь добавить это:

$.vegas( 
     { src: 'img/home/01.jpg' }
);

До

$.vegas('slideshow', {
    backgrounds: [ 
    ...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню