2013-02-11 61 views
0

我有一个启动页面到我的网站有非常小的内容,它几乎立即出现。我的第一页完成加载100%后,如何加载后续页面的图像?

用户登录后,它们会显示一个加载jQuery,一些JavaScript以及一些图像的页面。为了让第二个屏幕快一点,我想在第一个屏幕上预先加载一些图像,但是在所有内容都出现后不要以任何方式减慢屏幕的速度。

有没有一种方法可以做到这种预加载。也许与JavaScript(但不是jQuery)的东西。我只想确保下面的所有图片都是在一切之后下载的?

document-globe.png 
control-000-small.png 
home.png 
folder-open.png 
arbo-points-v-end.gif 
arbo-points-v.gif 
breadcrumb-sep.png 
+0

你可能想看看这个问题http://stackoverflow.com/q/287750/1269969 – placeybordeaux 2013-02-11 16:37:13

+0

你建议的问题有一个标题:我的CoffeeScript不会在JShint验证[关闭] :-( – Melina 2013-02-11 16:40:32

+0

对不起,我的意思是http://stackoverflow.com/q/287750/1269969 – placeybordeaux 2013-02-11 16:41:21

回答

2

目前尚不清楚你想要做什么。这里有一些事情可以做:

  1. 你可以聆听到您的启动页面的window.onload事件,这意味着在启动页面的HTML中指定的所有资源现在加载。然后,您可以预先加载将在其他地方使用的图像,可以在此页面的后面使用动态javascript或在后续页面中使用。对其他页面进行预加载只会导致图像位于浏览器缓存中用于这些页面(这将加速它们的加载)。

  2. 您可以将图像从HTML中取出并通过javascript插入。如果这样做,您可以先载入HTML中的图像,然后使用上面的window.onload事件,然后可以加载第二组图像并将它们插入到页面中。这是优先考虑哪些图像首先加载/何时加载的一种方式。

  3. 您可以将onload处理程序附加到页面中的七个特定图像并在这些onload处理程序中使用代码,您可以知道何时现在加载这七个特定图像,然后在JavaScript代码中执行其他操作(如启动加载或预加载其他图像)。由于HTML中指定的图像在任何JavaScript可以将事件处理程序附加到它们之前开始加载,因此必须在实际HTML中指定这些类型的onload处理程序,以便它们立即生效。

在你的HTML不能指定N个图像,并奇迹般地第一加载任何其他人之前,告诉浏览器加载它们的七人。浏览器/ HTML没有这种功能。

+0

谢谢 - 这是我想要做的选择:然后,您可以预先加载将在其他地方使用的图像javascript或在后续页面中,我的第一页不需要图像,很快就会出现,然后用户花时间输入登录信息,当他们这样做时,我想将下一页图像下载到缓存中以便准备好下一页出现。 – Melina 2013-02-11 16:41:42