Question

我制作了自己的幻灯片，我不想下载图书馆，因为我只想展示完整的背景图片和描述。

我的幻灯片已经构建完毕。现在我需要创建一个加载脚本，因为我将插入大图像。

你们能告诉我如何更改我的代码吗？

幻灯片放映必须在图片全部加载后开始。

我尝试在加载时使用，但它仍无效。

这是我的代码：

var pics = ["http://www.geant.net/Resources/PartnerResources/Partner%20Resources%20Image%20Library/Image%2010_958642.jpg",
    "http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"
];

var descriptions = ["Description number 1",
    "Description number 2"
];

function displaySlideshow(pics) {

    var i = 1;
    setInterval(
        function() {
            $("body, #resp-background").css({
                'background-image': 'url(' + pics[i] + ')',
                '-webkit-transition': 'background-image .25s ease-in-out',
                'transition': 'background-image .25s ease-in-out;',
                '-moz-transition': 'background-image .25s ease-in-out;',
                'background-size': 'background-image .25s ease-in-out;',
                '-o-background-size': 'cover',
                '-moz-background-size': 'cover',
                '-webkit-background-size': 'cover'
            });

            $('.s-description').html(descriptions[i]);
            i++;
            if (i >= pics.length) i = 0;

        }, 4200);
}


displaySlideshow(pics);

Jsfiddle在这里：

http://jsfiddle.net/kx1fgsox/

Answer 1

无法捕获加载背景图像的事件。此外，使用背景图像在我的屏幕上创建平铺图像的效果。这可能不是你想要的效果。

我建议将实际img元素插入div，而不是背景图片，如下所示：

var prevImg = $(".slideshow img").first();
var newImg = $("<img src=" + pics[i] + "></img>");

$('.slideshow').fadeOut();
$('.slideshow img').remove();
$('.slideshow').append(newImg);
newImg.load(function() { $('.slideshow').fadeIn(); });

这样，幻灯片按照您的意图淡出，并且在图像加载之前不会淡入。

然而，您需要一些CSS来完成这项工作：

.slideshow
{
    width: 100%;
}

.slideshow img
{
    width: 100%;
}

Answer 2

var pics = ["http://www.geant.net/Resources/PartnerResources/Partner%20Resources%20Image%20Library/Image%2010_958642.jpg",
    "http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"
];

var counter = 0
function preLoader()
{
            tempImage = [];
            $('.s-description').html("Preloading images...");
    for (var i = 0; i < pics.length; i++)
    {
        var tempImage.push(new Image());
        tempImage[tempImage.length-1].onload = loadImageComplete;
        tempImage[tempImage.length-1].src = pics[i];
    }
}

function loadImageComplete()
{
    counter++;
    if (counter == pics.length)
    {
                    $('.s-description').html("");
        displaySlideshow(pics);
    }
}
preLoader();

此代码将执行此操作。

http://jsfiddle.net/kx1fgsox/3/

如何为幻灯片显示加载脚本？

2 个答案: