jquery - 在脚本之前加载图像

Question

我有一个用于调整每个页面的背景图像大小的脚本。有时，当机器速度较慢且页面包含大量内容(其他图像)时，背景图像会被拉伸(stretch)。

一开始我有这个

$(document).ready(function() {
    ...code for resizing the image...
});

并且我决定在加载图像(带有 id img_bg)后立即执行代码，因此:

$("#img_bg").ready(function() {
  ...code for resizing the image...
});

我得到了更好的结果，但仍然没有达到我想要的完美。

还有人有其他想法吗？

谢谢

Answer 1

根据 jquery 文档 [1] .ready() 实际上仅在元素完全加载后执行。所以您的问题可能是，在调整大小脚本完成其工作之前需要一段时间。 (特别是如果要同时处理其他事情)解决此问题的一种方法是简单地隐藏图像，直到调整大小完成为止。在缩放方法末尾使用 show [2] 函数，并首先在 css 中为 #img_bg 设置 display="none"这个目的。

但是您应该考虑一下您的整个设置。如果您只使用较小的图像，则加载大图像然后使用 javascript 重新压缩它从来都不是真正明智的做法。那么一开始最好使用较小的一个(以节省带宽，从而提高加载速度)

另一个想法是，这种大小调整很可能可以通过巧妙地使用一些 css 而不是 javascript 来实现。但因此您必须提供一些有关脚本实际工作原理及其用途的更多详细信息。

[1] http://api.jquery.com/ready/

[2] http://api.jquery.com/show/