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

assign jQuery plugins to html elements its loading, not on window.onload

本文关键字：window onload 元素 分配 插件 jQuery 加载 html      更新时间：2023-09-26

我有一个单页的网络公文包，每个项目的照片都显示在一个图像转盘中，通过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

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

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

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

把这个"旋转"元素放在旋转木马的外面（不是像孩子一样），可能就在主体或旋转木马外面的div下面，让它绝对位于旋转木马的中心。

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

注意：document.ready在文档就绪后执行，.ready则在该元素就绪后执行。相反，window.onload是在所有元素都准备好之后执行的。所以，先准备好，而不是加载。这就是命令。

相关文章：