jQuery:文档准备好了,因为我的要求太早了

时间:2010-01-09 20:23:31

标签: jquery document-ready

我正在开发一个基于所有照片的网站。此站点的某些区域需要基于图像尺寸进行计算才能正常工作。我所发现的是,准备好文件的时间太早了,因此我的gui表现不正常。

我删除了文档就绪函数并将其替换为良好的'ol window.onload函数,因为如果我正确读取,则此函数在图像完全加载之前不会触发。

我的问题是,这会导致任何问题吗?还有其他我可能错过的解决方案吗?

感谢帮助人员!!

6 个答案:

答案 0 :(得分:48)

没有理由不能使用$(window).load()而不是$(document.ready()。在图像完全加载(或加载失败)之前,您对该功能不正确是正确的。

完全依赖$(window).load()的缺点是在某些情况下很明显你的javascript都没有工作(即导航点击事件)直到页面上的每个项目都已加载。一些用户(通常是网站的超级用户)非常快速地点击页面,这会降低整体用户体验。

快乐媒体在大多数情况下使用$(window).ready() 仅将事件放入{{1绝对要求他们

答案 1 :(得分:14)

请改为尝试:

$(window).load(function() {
 alert("images are loaded!");
});

有关$(document).ready()$(window).load()

的比较,请参阅此链接

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

答案 2 :(得分:8)

Altough window.onload符合您的需求,我建议加快一些事情:

$("img.load").load(function(){
    alert($(this).width());
});

现在,您可以在加载图像时单独处理图像,而不是等待整个元素集。

答案 3 :(得分:7)

这是一个非常简单的解决方案:

包括所有图片的width=""height=""属性。这将强制浏览器在加载图像之前正确地渲染所有内容。当图像加载时,页面空间中每个图像所需的空间将被适当地留出。

就是这样!

如果您这样做,document.ready将在您的方案中正常运行。发生的事情是浏览器在检索/加载之前不知道图像的大小,因此浏览器必须猜测。这可能会导致有趣的行为。指定图像的宽度和高度将解决此问题。

我很惊讶没有人提到这一点。它不一定是javascript问题,虽然cballou's answer绝对是好建议。

无论如何,希望你学到新东西。 ;)

答案 4 :(得分:2)

您可以使用load() event in jquery,但是在文档中提到如果元素已经加载,它可能无法正常工作。

  

注意:只有在元素完全加载之前设置它才会起作用,如果你设置它之后什么都不会发生。这不会发生在$(document).ready()中,jQuery处理它以按预期工作,也就是在DOM加载后设置它。    - http://docs.jquery.com/Events/load

答案 5 :(得分:2)

如果你想延迟一段时间,可以使用“setTimeout”:)