Question

我制作了一个垂直旋转木马，其中包含点击时应全屏显示的图像。但问题是我无法弄清楚如何确保全屏图像被预加载或者像缩略图一样工作（预加载）。

我不确定使用css背景预加载全屏图像的方法是什么，以及当我点击轮播中的缩略图时如何确保图像淡入或只是某些过渡。

请查看我的代码上传的以下链接。 http://www.lluvia.me/slideshow/carousel.html

如果方便的话，可以通过检查源来检查脚本。帮助将不胜感激。谢谢！

Answer 1

发现这篇文章，并认为它可能对您有所帮助，Preloading images with jQuery

尝试并发布您身体中的一些代码以供将来参考。：）

快速简便：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

或者，如果你想要一个jQuery插件：

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

或者，如果您想纯粹使用CSS，请查看此页面：http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/您可以将背景图像放在屏幕外，然后在需要时进入屏幕。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

全屏幻灯片与垂直旋转木马。淡入全屏图像问题

1 个答案: