Question

我有一个one-page web portfolio，其中每个项目的照片都显示在图像轮播中，控件/动画通过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

我希望我提供了帮助我所需的所有信息;我急切地等待着回答。

Answer 1

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

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

将这个“旋转”元素放在旋转木马外面（不是孩子），可能只是在身体下方或旋转木马外面的div，并使其绝对位于旋转木马的中心。

这样，一旦旋转元素准备好（当然在重型旋转木马准备就绪之前），它就会显示并旋转。一旦旋转木马准备就绪，gif将停止旋转并消失。

注意：document.ready在文档准备好后执行，并且.ready在元素准备好后执行。相反，window.onload在所有元素准备好后执行。所以，先准备好，而不是onload。这就是订单。

将jQuery插件分配给其加载的html元素，而不是window.onload

1 个答案: