如何使用PhoneGap预加载图像？

Question

我开始相信发生了两件事.首先,如果你想预加载一个网址,你可以这样做:

body:after{
   content: url(http://www.example.com/img/img_1.png) display:none;
}

但据我所知,在这种情况下这没有帮助:

body:after{
   content: url(../img/img_1.png) display:none;
}

在后一种情况下,图像已经是本地的,所以它不必"下载"它？真的吗？或者第一位代码会更多地缓存图像？

我问,因为即使我这样做,然后我转换到另一个页面,使用jquery mobile,下一页仍然需要几秒钟来加载背景图像.即使它是本地资产.

我该如何解决这个问题？

Answer 1

从我所做的测试来看，加载图像时似乎有两件事可能会导致延迟：

1. 当需要从 URL 加载图像时，或者
2. 当图像位于本地，但需要放置在显示屏上时

我没有意识到，使用 PhoneGap，即使图像是本地的，也可能需要一些时间来加载。这就是给我带来问题的原因。嗯，这个以及我从 URL 加载的事实。所以在我的例子中，我使用了“ CSS3缓存插件”，如下所示：

jQuery(function($) { 
    $.preload.images(document) 
});

这解决了我加载 CSS 文件中图像的问题。但后来为了我自己的方便，我在 css 文件中添加了一个用于本地缓存文件的部分。就像这样：

#cacheMe1 { background: #ffffff url('../img/img1.png') 50% 50% repeat-x; }
#cacheMe2 { background: #ffffff url('../img/img2.png') 50% 50% repeat-x; }
#cacheMe3 { background: #ffffff url('../img/img3.png') 50% 50% repeat-x; }
#cacheMe4 { background: #ffffff url('../img/img4.png') 50% 50% repeat-x; }
etc

这解决了大多数图像的缓存问题，而且它允许我仍然将 URL 保留在应用程序中加载（我有一个画廊部分，目前可以在其中查看图像加载，而不是显示）。

我所做的似乎也有效，是我使用“InAppBrowser”插件通过在隐藏窗口中打开它们来预加载整个页面：

var ref = window.open('http://www.example.com', '_blank', 'hidden=yes');

如果您在加载应用程序时打开一堆文件，则当您再次打开这些 URL 或使用以下命令切换到窗口时，似乎会出现以下情况：

ref.show();

因此，我发现了两种非常适合我的场景的缓存文件的好方法。希望它对其他人有帮助！