Vegas Background jquery 插件答案

【问题标题】：Vegas Background jquery plug-inVegas Background jquery 插件
【发布时间】：2013-09-23 20:09:53
【问题描述】：

我在网站http://www.freetimemagazine.net 上使用幻灯片Vegas Background，但初始上传时间太长，您看到没有元素的黑色背景太久。我想放置一个不属于滑块的背景静止图像，但它仅在加载的初始时间出现。我试图设置主体背景但我什么都没有，我试图在 js 插件中为滑块的第一张图像设置一个“延迟”更快，但我没有得到任何东西......如何设置初始/默认图片？

下面是控制幻灯片的代码：

1) 主题.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) 样式.css

body  {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-size: 1.4rem;
color: #292929;
background: #000;  }

【问题讨论】：

标签： jquery plugins background slider

【解决方案1】：

尝试添加这个：

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

之前

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

【讨论】：

【解决方案2】：

我不确定您是否已经知道这一点，但您需要做的就是在您的网站正文中添加背景图片。

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

您也可以考虑进一步优化您的图片。如果您尝试加载更大的图像，它们可能需要更长的时间来加载，不仅如此，而且用户不会访问您的网站来等待背景，这可能会造成糟糕的用户体验。

【讨论】：