如何为移动网站预加载图片（例如 http://m.youtube.com/、http://m.zoosk.com/）答案

【问题标题】：how do I pre load images for mobile website (e.g. http://m.youtube.com/, http://m.zoosk.com/)如何为移动网站预加载图片（例如 http://m.youtube.com/、http://m.zoosk.com/）
【发布时间】：2009-09-15 08:51:15
【问题描述】：

我使用了这个方法：CSS Throwdown - Preload Images without JavaScript 杰夫·斯塔尔 - http://perishablepress.com/press/2007/07/22/css-throwdown-preload-images-without-javascript/

当我在网络浏览器中查看它时它工作正常，但是在移动设备上，它似乎没有任何效果，.png 图标仍然需要很长时间才能加载。

【问题讨论】：

标签： html css mobile-website image-preloader

【解决方案1】：

预加载并不能神奇地让一切变得更快——它只是意味着有时会在需要数据之前发出请求。预加载是否发生？也许只是因为移动连接不太好，所以速度很慢。

在我看来，这种预加载图像的方法可以在移动浏览器上正常工作 - 我非常怀疑移动浏览器通过不获取图像进行“优化”是不可见的。

【讨论】：

谢谢多米尼克。这很可能不是一个很好的移动连接。不，似乎根本没有进行预加载。我只在登录页面上使用图标，这需要很长时间才能加载，即使我指定了图标最终在所有内容加载后加载的宽度和高度。我查看了一些具有更多/更大图像的参考站点，这些图像几乎可以立即从同一部手机加载。我查看了他们的源代码，无法获取任何类型的预加载脚本或 css。我有点难过，因此问题是否可能有另一种我不知道的方式。再次感谢您的回复。
嗨，克里斯——我唯一能想到的是，来自您服务器的连接可能不如 youtube 的那么好，但在普通浏览器中它也会很慢。你用的是什么手机浏览器？您是否尝试过其他预加载技术？
嘿 Dominic 我正在测试许多不同手机的默认浏览器，但我也时常使用 Opera mini。我没有尝试过任何需要 javascript 的预加载技术——我的简报不允许我在这个网站上使用 javascript。我现在正忙着用 CSS sprite 解决方案替换图标，看看它如何影响页面加载时间 - 更少的 HTTP 请求和更小的总文件大小来加载。您能否推荐任何替代的预加载技术？问候克里斯
Sprites 可能会有所帮助 - 尽管这意味着额外的 CSS，并且您必须等待整个 sprite 图像加载后才能显示任何图像。不过我想不出更好的方法。

【解决方案2】：

如果移动浏览器不支持 javascript（或对 javascript 的支持不够好），那么这种预加载方式可能不起作用。

我希望使用 javascript 预加载也不太可能在任何使用转码或在服务器上预渲染的浏览器或代理上工作。

您是否尝试过老式（90 年代）的预加载方法，即在主页（甚至每个页面）上包含图像，但大小为 1px x 1px（也可以尝试 0x0）。这可能意味着用户付费下载的内容超出了他们的需要。这是一个需要考虑的问题。

首先要做的是：确保您确实需要该图像；使其尽可能小（物理尺寸和图像编码压缩）；和 [gzip] 压缩通过 HTTP 发送的文件。还要确保您正在尽一切努力让用户/客户端浏览器正确缓存图像。

【讨论】：

你真的阅读过链接的文章吗？它几乎描述了您的方式，并且不使用 JavaScript。
是的，谢谢康拉德。在我提到的问题中，这也是我在网站上使用的方法，但是在初始加载时似乎有点慢。结合调整压缩，CSS预加载方法和浏览器缓存对于这个项目来说似乎很好，至少现在是这样。问候
Konrad - 是的，我误读了最初的问题，只是做了一些关于在移动设备上预加载的一般 cmets。要考虑的其他一般事项是转码器和浏览器可能会渲染到指定的大小，然后必须以实际所需的大小重新渲染图像。克里斯 - 您是否验证了在预加载尝试时正在向服务器发出图像请求？

【解决方案3】：

如果您的网站将针对移动设备，而不仅仅是您正在测试的移动设备，那么您可能很难找到适用于所有移动浏览器的通用解决方案。如果你想提高图片的下载时间，也许你可以考虑调整图片的压缩来减小尺寸？

【讨论】：

谢谢，最终确实通过 CSS 预加载调整了压缩，现在似乎工作正常，初始加载有点慢，但从那时起浏览器也会缓存图标，这会有所帮助。