0

我有一个单页网络作品集，其中每个项目的照片都显示在图像轮播中，并通过 jQuery Lemmon Slider插件分配控件/动画。这个插件需要在window.onload.

但是，由于图像相对较大（页面上有更多项目），并且在window.onload下载所有图像之前不会触发事件，因此轮播在该事件触发之前无法使用（目前大约 5 秒与宽带连接）。

所以问题是 -我如何强制调用轮播上的插件（同时延迟加载图像），或者我如何在加载图像和后台控件时显示加载微调器 gif 并显示它们（使用分配的插件控制）什么时候准备好？

我的 index.php 相关部分的伪代码如下所示：

- for every directory in 'projects/':
    - read the directory
    - generate the carousel and put all the images in the code <div> <ul> <li> <img>
    - assign this project's carousel ID
- at the end of the page, initialize the plugin for every carousel there is through the window.onload event

我希望我提供了帮助我所需的所有信息；我急切地等待任何答案。

4

1 回答 1

0

好吧，如果你的意思是插件必须在页面加载时初始化，但不一定通过 onload 事件，你可以尝试 jquery “ready” 所以说你的旋转 gif 有 id “spinning”，你可以做

$("#spinning").ready(function(){
    $(this).show();
});
$(".carousel").ready(function(){
    $("#spinning").hide();
});

并将这个“旋转”元素放在轮播之外（而不是作为子元素），可能就在 body 下方或轮播外的 div 下方，并使其绝对定位在轮播的中心。

这样，一旦旋转元件准备好（当然是在重型旋转木马准备好之前），它就会出现并旋转。旋转木马准备好后，gif 将停止旋转并消失。

注意：document.ready 会在文档准备好后执行，而 .ready 会在元素准备好后执行。相反，window.onload 在所有元素都准备好之后执行。所以，先准备好，再onload。那是命令。

于 2013-08-25T12:34:20.613 回答