什么触发了 jQuery Ready() 函数?
我现在真的很困惑,我认为当页面结束加载所有内容时会触发 jQuery(document).ready(function(){ ... })
。
但事实并非如此看起来像这样,我刚刚经历过:在我的页面中上传大图片并向我的就绪功能添加警报。似乎在后台图像下载完成之前警报就开始闪烁了...是否有一种等待代理用户和 http Web 服务器之间的通信停止调用就绪函数的方法?我的意思是,我想让访问者等待一个大的黑色 div 并在其中“加载”文本,直到所有元素都输出(然后释放 div)。
I'm really confused now, I thought jQuery(document).ready(function(){ ... })
was triggered when the page ends to load all the stuff in.
Well it doesn't look like that though, I was just experiencing : uploading large pictures in my page and add an alert to my ready function. It appears the alert is splashing before the images in the background has finished to be downloaded... Is it a way to wait that the communication between the agent user and the http webserver get down to call a ready function ? I mean I want to make visitors waiting with a big black div and 'loading' text in it until all the elements are outputted (and then release the div).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
ready 事件在加载所有 DOM 元素时触发,但不会在这些元素引用的任何图像之前触发已加载完毕。您可能想使用 load 事件,该事件将等待图像加载完毕。请注意文档中的警告。
前任:
The ready event is fired when all of the DOM elements are loaded, but not before any images referenced by those elements are finished loading. You probably want to use the load event instead which will wait until images have been loaded. Note the caveats in the documentation.
Ex:
根据我的理解,这是 dom 加载的时候。这将包括所有脚本文件,我假设是 css 文件。但它不包括图像。我想知道使用 window.onload = function(){} 是否是更好的选择。
window.onload 与 $(document).ready()
From my understanding it's when the dom has loaded. That would include all script files and I would assume css files. But it wouldn't include images. I wonder if using the window.onload = function(){} would be a better choice.
window.onload vs $(document).ready()
window.onload
在页面上的所有内容加载时调用。所以 DOM、脚本、CSS 和图像。document.ready
在 DOM 构建完成时调用,因为此时它正处于可以操作/访问的阶段。因此,在这种情况下,加载了img
html,但未加载图像资源。您可以为该图像执行
load
事件:或者只是等待窗口完全加载:
window.onload
is called when everything on the page as loaded. So the DOM, scripts, css and images.document.ready
is called when the DOM has finished being constructed, as it is then at a stage when it can be manipulated/accessed. So in this case theimg
html as loaded but not the image resource.You could do a
load
event for that image:Or just wait for the window to load completely:
它只是在 DOM 准备好时发生,而不是在所有资源都已加载时发生。检查此内容以了解如何检查图像是否已加载:
http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/
It is simply for when the DOM is ready, not when all the resources have been loaded. Check this to find out how to check that images have loaded:
http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/
所有 DOM 完全构建后触发
ready
事件。如果您想等到图像加载完毕,可以使用load
事件ready
event triggerd after all DOM is fully constructed. if you want to wait until images have been loaded you can useload
event正如您在带注释的源,jQuery 就绪只是为 DOMContentLoaded 事件适用于大多数浏览器,对于 ol' IE,它添加到 onreadystatechange 和 onload 中。
从 MDN 文档来看,“当文档完全加载和解析时,会触发 DOMContentLoaded 事件,无需等待样式表、图像和子框架完成加载”
要等待整个页面,只需使用 load 侦听器,或包装它的
jQuery(window).load(...)
。As you can see in the annotated source, the jQuery ready is just adding a listener for the DOMContentLoaded event for most browsers, and for ol' IE, it adds to onreadystatechange, and onload.
From the MDN documentation, "The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading"
To wait for the full page, just use the load listener, or the
jQuery(window).load(...)
that wraps it.