Question

我的网站标题部分有一个jQuery图像滑块，可以自动滑动动作定期显示图像。现在的问题是当你第一次加载页面时（没有缓存），它会立即加载滑块中的所有图像，并将图像一个在另一个上面对齐在网页上（一个div在另一个上面）），所以你在页面加载的那一刻就可以看到所有的图像。它看起来不太专业。是否有一个onpageload（）函数可以阻止所有图像一次显示或者可以在显示它们之前先在后台加载它们？这尤其是网速较低的问题......我的网站：http://v4m.mobi

谢谢！

Answer 1

为您的图片添加display:none或visibility:hidden样式，然后在display:[block/inline/etc]上将其样式更改回visibility:visible或$(window).load()。

$(window).load(function(){
    $('#myImage1').css('visibility','visible');
    $('#myImage2').css('visibility','visible');
    //etc
});

Answer 2

预加载图像或使用jQuery并使用window.load（）加载代码。

$(window).load(function(){  
// runs after images are loaded  
});

Answer 3

你能不能简单地做到：

.slideshow img {
    display: none;
}

.slideshow img:first-child {
    display: block;
}

根据浏览器的不同，它们可能会也可能不会全部加载，但至少只能看到一个。另外，您可以看到第一个图像的非JavaScript后备。

如果您需要较旧的浏览器支持，请创建某种“可见”类并将其添加到第一个图像元素。

jQuery图像滑块一次加载所有图像

3 个答案: