Question

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

我遇到的问题是，jQuery在图像下载完成之前不会触发，每个图像大约23K左右，所以不是那么大，但作为一个组，这相当于大约4MB。

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

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

我希望有一种方法可以在下载所有内容之前激活jQuery脚本吗？

干杯

更新：我的代码是：

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

但是在所有图像都已加载之前，这不适用于IE。

Answer 1

一旦DOM完成加载（即，在所有图像完成下载之前，但是一旦页面的所有html都已完成加载），

$(document).ready()将被执行。例如...

$(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>

Answer 2

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

Answer 3

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

如果是这种情况，请忘记$（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库。

jQuery预文档就绪事件

3 个答案: