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

Question

嗨，我已经用this wonderful jQuery slider构建了一个大型图片库，考虑到我包含的幻灯片数量，初始加载时间很重要，我想知道是否有一种简单的方法来集成一个基本的加载动画div--例如。带有“正在加载图库..”的微调器文本--滑块完全加载后隐藏的文本？我很好奇是否有一种方法可以让我指示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; }

希望这将有助于什么，这段代码所做的是，直到页面完全加载，它将隐藏所有的滑块图像，除了加载图像，一旦页面完全加载所有图像，它将按照您的需要工作。