我正在开发一个以照片为主题的网站。该网站的某些区域需要根据图像尺寸进行计算,以便正确工作。我发现document ready过早触发,导致我的GUI行为不稳定。
我删除了document ready函数,并用经典的window.onload函数代替,因为如果我理解正确,这个函数在图像完全加载后才会触发。
我的问题是,这样做会引起任何问题吗?还有其他解决方案吗?谢谢大家的帮助!!
我正在开发一个以照片为主题的网站。该网站的某些区域需要根据图像尺寸进行计算,以便正确工作。我发现document ready过早触发,导致我的GUI行为不稳定。
我删除了document ready函数,并用经典的window.onload函数代替,因为如果我理解正确,这个函数在图像完全加载后才会触发。
我的问题是,这样做会引起任何问题吗?还有其他解决方案吗?谢谢大家的帮助!!
您可以使用$(window).load()
而非$(document.ready())
。您说得很对,该函数要等到图片完全加载(或无法加载)后才会触发。
但是完全依赖$(window).load()
也有缺点。在某些情况下,直到页面上的每个项目都加载完成(例如导航或点击事件),才会发现您的javascript未能运行。一些用户(通常是网站的核心用户)会快速浏览页面,这会降低整体用户体验。
最好的办法是大多数情况下使用$(window).ready()
,并且只将绝对需要的事件放在$(window).load()
中。
不妨试试这个:
$(window).load(function() {
alert("images are loaded!");
});
查看此链接,了解$(document).ready()
和$(window).load()
的比较。
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
虽然window.onload
可以满足您的需求,但我建议稍微加快速度:
$("img.load").load(function(){
alert($(this).width());
});
width=""
和height=""
属性。这将强制浏览器在加载图片之前正确地呈现所有内容并放置在正确的位置。在页面的实际空间中,每个图像所需的空间将在加载图像时得到适当的设置。document.ready
在你的情况下就可以正常工作了。发生的情况是浏览器在检索/加载图像之前不知道图像的大小,因此浏览器必须猜测。这可能会导致奇怪的行为。指定图像的宽度和高度将解决此问题。load()
事件,但是文档中提到,如果元素已经加载完成,则可能无法按预期工作。
注意:load只在元素完全加载之前设置才能起作用,如果在加载完成后设置,将不会发生任何事情。这在$(document).ready()中不会发生,因为jQuery处理它以按预期工作,即使在DOM加载后设置它也一样。 -- http://docs.jquery.com/Events/load