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

从我已经完成的测试来看，加载图片时似乎有两件事会导致延迟：

需要从网址加载图片时，或
图像位于本地，但需要放在显示屏上

我没有意识到，使用PhoneGap，即使图片是本地的，也可能需要一段时间才能加载。这就是给我带来问题的原因。好吧，这和我从URL加载的事实。所以在我的情况下，我使用了＆＃34; CSS3 Caching Plugin＆＃34;像这样：

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加载（我有一个图库部分，目前可以看到图像加载，而不是显示）。

我也做了什么似乎工作，是我使用＆＃34; InAppBrowser＆＃34;插件通过在隐藏窗口中打开它们来预加载整个页面：

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

如果您在加载应用时打开了一堆文件，那么当您再次打开这些网址或切换到以下窗口时，似乎就会出现：

ref.show();

所以我发现有两种不错的方法来缓存适用于我的场景的文件。希望它可以帮助别人！

Answer 2

我不知道我是否理解得很好，但也许它对你有用：

<img src="my.png" onerror="this.src = 'image-not-found.png';" />

Answer 3

当我遇到预装图像的问题时，我不得不放弃使用div的想法，因为它无法正常工作（只要我记得浏览器拒绝加载不可见元素的内容以加快速度页面加载并减少流量）。相反，我创建了一个width，在浏览器中可以看到，但它只有height和background-image。我为此块加载background-image所需的图像。整个技巧是#preload { height: 0; width: 0; background-image: url(image-1.png), url(image-2.png); }属性可以采用多个值。 CSS将如下所示：

{{1}}

所以你不要弄乱标记。希望这个技巧能适用于你的情况。

Answer 4

您不需要直接将图像附加到DOM，因此无需使用css来隐藏它。使用JavaScript预加载图片。

var image = new Image();
image.src = "yourfile.jpg"

然后，您可以使用appcache提供更长期的解决方案。

如何使用PhoneGap预加载图像？

4 个答案: