jquery - 在初始化 jQuery 图像 slider 时显示加载器

Question

嗨，我使用 this wonderful jQuery slider 构建了一个大型图片库。 ，并且考虑到我包含的幻灯片数量，初始加载时间很长，我想知道是否有一种简单的方法可以集成基本的加载动画 div——例如。带有“正在加载图库..”文本的微调器—— slider 完全加载后会隐藏吗？我很好奇是否有一种方法可以让我引导 DOM 首先显示加载 div，并且可能使用 slider 的回调函数之一(或通过 jQuery(?))在完全初始化时拉出 div？最终，我希望在脚本、标记和缩略图加载到浏览器中时向用户显示一些内容(我使用的是延迟加载功能，因此至少最初不会加载所有完整内容) - 尺寸的图像。)

感谢您的见解。

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; }

希望这将有助于此代码的作用，直到页面完全加载，它将隐藏除加载图像之外的所有 slider 图像，一旦页面完全加载所有图像，它将根据您的需要工作。