如何为移动网站预加载图像（例如http://m.youtube.com/、http://m.zoosk.com/）
我使用了这个方法：CSS Throwdown - Preload Images without JavaScript 作者：Jeff Starr - http://perishablepress .com/press/2007/07/22/css-throwdown-preload-images-without-javascript/
当我在网络浏览器中查看它时它工作正常，但是在移动设备上，它似乎没有任何结果，.png 图标的加载时间仍然太长。
I used this method: CSS Throwdown - Preload Images without JavaScript
By Jeff Starr - http://perishablepress.com/press/2007/07/22/css-throwdown-preload-images-without-javascript/
It works fine when I view it in web browser, however on mobile, it doesn't seem to have any effect, .png icons still takes too long to load.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
预加载并不会让一切变得神奇地更快——它只是意味着有时在需要数据之前发出请求。预加载真的发生了吗？也许速度慢只是因为移动连接不太好。
在我看来，这种预加载图像的方法在移动浏览器上运行得很好 - 我非常怀疑移动浏览器通过不获取不可见的图像来“优化”。
Preloading doesn't make everything magically faster - it just means that requests are sometimes issued before the data is required. Is the preloading happening at all? Perhaps things are just slow because the mobile connection isn't great.
That method of preloading images looks to me like it'll work fine on mobile browsers - I highly doubt mobile browsers "optimise" by not fetching images are not visible.
如果移动浏览器不支持 javascript（或对 javascript 的支持不够好），那么这种预加载方式可能不起作用。
我预计使用 JavaScript 进行预加载也不太可能在任何在服务器上使用转码或预呈现的浏览器或代理上运行。
您是否尝试过老式（90 年代）的预加载方法，即将图像包含在主页（甚至每个页面）上，但大小为 1px x 1px（也可以尝试 0x0）。
这可能意味着用户付费下载的内容超出了他们的需要。这是一个需要考虑的问题。
首先要做的是：确保您确实需要该图像；使其尽可能小（物理尺寸和图像编码压缩）； [gzip] 在通过 HTTP 发送文件时对其进行压缩。还要确保您正在尽一切努力允许用户/客户端浏览器正确缓存图像。
If the mobile browser doesn't support javascript (or support javascript well enough) then preloading that way may not work.
I expect it's also unlikley that preloading with javascript would work on any browser or proxy which uses transcoding or pre-rending on the server.
Have you tried the old school (90's) approach to preloading which was to include the image on the homepage (or even each page) but sized to 1px by 1px (could also maybe try 0x0).
This could mean that the user is paying to download more content than they need. Which is an issue to consider.
First thing to do is: make sure you really need the image; make it as small as possible (physical size & image encoding compression); and [gzip] compress the file as it's sent over HTTP. Also make sure that you're doing everything you can to allow the user/client browser to correctly cache the images.
如果您的网站将针对移动设备，而不仅仅是您正在测试的设备，那么您可能很难找到一种适用于所有移动浏览器的通用解决方案。如果您想提高图像的下载时间，也许您可以考虑调整图像的压缩以减小尺寸？
If your site is going to be aimed at mobiles, and not just the one you are testing with, you might have difficulty in finding a universal solution that works across all mobile browsers. If you want to improve the download time of the image, maybe you could consider adjusting the compression of the image to reduce the size?