jQuery 预文档就绪事件答案

【问题标题】：jQuery pre document ready eventjQuery 预文档就绪事件
【发布时间】：2010-05-20 09:01:27
【问题描述】：

我有一个包含 179 个缩略图的列表，我正在尝试将 jQuery 灯箱工具应用于超链接的无序列表。

我遇到的问题是，jQuery 直到图像下载完成后才会触发，每个图像本身大约 23K，不是那么大，但作为一个组，这相当于大约 4MB。

在页面完全下载每个缩略图然后允许 jQuery 触发之前，IE（客户端使用的主浏览器）有 5 秒的延迟。

我尝试将 jQuery 文档就绪事件放在不同的地方但没有成功，并且只能通过在灯箱后应用 .show() 之前使用 display:none 设置 ul 上的 css 来隐藏创可贴已申请。

我希望有一种方法可以让 jQuery 脚本在所有内容下载之前触发？

干杯

更新：我的代码是：

$(document).ready(function(){
    $("li.eventPhoto a").lightBox();
});

但在所有图片加载完成之前，这不适用于 IE。

【问题讨论】：

标签： jquery image download

【解决方案1】：

$(document).ready() 将在 DOM 完成加载后立即执行（即，在所有图像完成下载之前，但在您页面的所有 html 完成加载后）。比如……

$(document).ready(function(){
    // do someting as soon as the document is ready, 
    // possibly before the images are loaded
}) ;

如果你想在所有图片加载完成后做一些事情，那么你需要使用 onload 事件，像这样......

$(window).bind('load', function() {
    // Do something when the images have finished loading
});

如果您希望脚本现在立即执行，在它出现在 html 文档中时，请不要使用任何“就绪”功能。就在那儿做吧……

<script>
    // code that you want to execute as soon as the browsers finds this bit of your doc.
    // note that you won't be able to access the DOM as it may not all be present
</script>

【讨论】：

文档就绪事件是在 ASP.NET 表单内部还是外部是否重要？尝试从我的通话中删除文档就绪位，但没有改变任何东西。
感谢回复，一直在玩，认为可能是js下载时间长了（由于图片数量，灯箱js可能有点重）。谢谢大家。我会将其标记为正确答案，并为您提供时间。干杯
@Luke，您可以将$(document).ready() 调用放在页面的任何位置（尽管它们必须在包含 jquery 之后）。您还可以根据需要添加任意数量的$(document).ready() 呼叫。它们都被保存并在完整的 html 页面完成下载后执行。 jQuery 文档解释得很好：api.jquery.com/ready

【解决方案2】：

我会尝试lazyload-plugin，以便页面可以完全加载并在所有图像加载之前触发$(document).ready()，然后您可以下载所有图像。

【讨论】：

【解决方案3】：

正如 rikh 和 Jens 所提到的，您可以使用 ready() 事件在加载缩略图之前触发代码。但是，您提到 IE，这意味着您可能已经在使用此事件但在该浏览器中失败（它可能，因为 IE6/7 并没有真正的事件，而 jQuery 要么尝试通过其他方式检测它，要么使用负载，我不知道）。

如果是这种情况，请忘记 $(document).load()/$(document).ready() 事件，并在呈现最后一个链接之后将代码插入到 html 中。

类似：

 <ul>
    (...) // List of thumbnails and links
 </ul>

 <script type="text/javascript">
    // Attach lightbox to links
 </script>

这样，浏览器将在创建 HTML 链接时附加与灯箱相关的事件，而不必等待 dom/html 加载后才开始工作。需要记住的重要一点是，在 HTML 中，在标签之前，必须已经渲染了脚本所需的所有标签和元素，并且必须已经引用了必要的 js 库。

【讨论】：