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

Question

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

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

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

谢谢你的帮助!

Answer 1

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

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

在幸福中.将使用$(window).ready()在大多数情况下 ,并 只把事件里面$(window).load()是绝对需要它们.

Answer 2

试试这个:

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

请参阅此链接以比较$(document).ready()和$(window).load()

Answer 3

Altough window.onload会满足你的需求,我建议加快一些事情:

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

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

Answer 4

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

包括所有图像的width=""和height=""属性.这将强制浏览器在加载图像之前正确地渲染所有内容.页面的不动产中所需的空间将在图像加载时正确放置.

而已!

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

我很惊讶没有人提到这一点.它不一定是一个javascript问题,虽然cballou的答案肯定是好建议.

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