Question

我在网站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;  }

Answer 1

尝试添加：

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

之前

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

Answer 2

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

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

您也可以考虑更多地优化图像。如果你正在尝试加载更大的图像，他们可能需要更长的时间来加载，不仅如此，但用户不会访问你的网站等待背景，它可能会造成一个糟糕的用户体验。

Vegas背景jquery插件

2 个答案: