在初始化jQuery图像滑块时显示加载程序

Question

嗨，我使用这个出色的jQuery滑块构建了一个大型图像库，考虑到我包含的幻灯片数量，初始加载时间非常重要，我想知道是否有一种简单的方法可以集成一个基本的加载动画div。带有"loading gallery."文本的微调器——滑块完全加载后隐藏？我很好奇是否有一种方法可以让DOM首先显示加载的div，并可能使用滑块的回调函数之一——或者通过jQuery（？）——在完全初始化时拉出div？最终，我希望在脚本、标记和缩略图加载到浏览器的5-10秒内向用户显示一些内容（我使用的是延迟加载功能，所以它至少不会在最初加载所有全尺寸图像。）

感谢您的真知灼见。

Answer 1

您可以按以下方式进行操作，但请记住它未经过测试。

js

$(window).load(function(){
   // initialize slider.
   // remove loading_image image as below
   $('img#loading_image').remove();
});

HTML

<div><img src="loading.jpg" alt="" id="loading_image" /></div>
<div><img src="image.jpg" class="hide" alt="" /></div>
<div><img src="image.jpg" class="hide" alt="" /></div>
<div><img src="image.jpg" class="hide" alt="" /></div>
<div><img src="image.jpg" class="hide" alt="" /></div>

CSS

#loading_image { display: block; other css code. }
.hide { display: none; }

希望这将有助于此代码所做的是，在页面完全加载之前，它将隐藏除加载图像之外的所有滑块图像，并且一旦页面完全加载了所有图像，它将根据您的需要工作。