jQuery文档准备就绪太慢

3
我有两个页面,都显示一个模态表单。这些页面使用jModal插件,并且一切顺利。
我的问题是,其中一个页面的性能很好,另一个页面也基本相同,只是有广告,导致性能略有下降。虽然这种程度的下降还可以接受,但由此产生的延迟可能会导致访问者在模态窗口显示之前就点击页面上的链接,从而错过模态窗口。
代码位于$().Ready内,我认为这是问题的根源,因为页面必须等待广告服务器完成广告投放。我去掉了$().Ready,但这只会导致代码根本不执行。
有没有一种方法可以锁定页面,直到文档准备好执行?

DOM准备就绪(例如 $(function(){}) )将在* DOM准备就绪时 *立即执行。它不应该等待广告。问题可能是前面的代码延迟了DOM准备就绪代码的触发,因为它可能没有早期运行。将DOM就绪处理程序移动到广告脚本之前。 - iCollect.it Ltd
4个回答

1
一种方法是向您的网站添加一个覆盖层,始终存在,并使用 $().Ready 移除它。这个覆盖层会在所有内容的上方,不允许用户点击。

如果你想允许没有JavaScript的用户优雅地回退,这样的东西也可以放在noscript标签内,这样对于从未触发ready事件的浏览器是不会出现这个东西的。 - James Thorpe
使用jQuery时,这是常见问题吗? - gilesrpa

1

我会提供这个替代方案,因为这是我通常选择的选项。

文档在jQuery启动前和启动后的外观差异可以通过样式来模仿。

例如(在您的情况下),您向用户公开了链接,同时等待jQuery将它们隐藏(以迂回的方式)。首先使用CSS将它们隐藏,然后作为初始jQuery的一部分显示它们(一旦完全初始化)。

我在UI上使用swiper时遇到了这个问题;我有一个巨大的列表,其宽度将根据swiper插件(在初始化时)设置。相反,我只需在我的CSS文件中设置一个巨大的宽度(故意过度补偿),然后让swiper插件完成其工作。典型用户无法分辨出差异。

虽然不是完美的,但是在这种情况下,CSS比等待jQuery快得多,并且与其他选项不同,您不需要合并额外的覆盖层。


1
将模态窗口放在页面顶部,紧接着文档准备好之后。

0

感谢大家的帮助。

最后我添加了一个叠加层,快速、简单,完成任务。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接