JavaScript 预加载图片 - 检查图片是否已缓存/加载以防止预加载。

Question

我有几个疑问，虽然我已经确定了，但仍然希望非常准确。

如果这是一个重复的问题，请给我提供链接，以便我删除这个问题并参考提供的链接。

1. 我需要预加载一些图片。如果它们已经存在于浏览器缓存中，我不想预加载。

2. 如果我们正在预加载，则使用JavaScript代码进行预加载会发送请求。同时，在HTML文档中有相同图像的img src。浏览器是否会请求两次图像？一次是在预加载时，另一次是在看到img标签时？

3. 我希望预加载和img src过程都是异步的。我希望当链接图像时，资源和请求所需的时间与预加载相同。

4. 我希望预加载不会像同步Ajax那样工作。即通过优先级来实现。

5. 是否可以知道图像是否在缓存中，以便我们不必预加载它。

6. 我错过了一些问题吗？如果是这样，请提供这些答案，以便Stack Overflow用户可以更新。

只需要回答是或否即可。如果可能，我希望有一些外部参考或建议或答案。

谢谢。

- Jayapal Chandran

Answer 1

var preloadImgs = function(){
    var current, image_urls = ['image_one.jpg', 'image_two.jpg', 'image_three.jpg'], i, imgObj = new Image;

    for (i = 0; i < image_urls.length; i += 1) {
        current = (imgObj.src = image_urls[i]);
        if (current.complete) { // image is cached/loaded
          // do something with the cached/loaded image
        }
    }
};

“我需要预加载一些图片。如果它们已经存在于浏览器缓存中，我不想进行预加载。” 但这并不重要，预加载只是将图像对象的src属性分配给URL，它会自动处理，如果图片已经可用，则请求下一个图片。

- Q_Mlilo

Answer 2

您可以检查.complete属性，如果图像已被缓存，则该属性应该大多数情况下为true。

如果您在图像被缓存时预加载它们，则不会引起太多网络流量。您是想节省内存吗？

您可以通过ajax进行head请求，如果返回304而不是200，则表示其已经存在于缓存中。

关于参考资料： http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

- Ravindra Sane

---

1. 我想停止任何类型的页面加载延迟（当然是内存方面）。
2. 我希望尽可能简单地实现它，而且此时我不能使用异步请求，因为我不想创建太多的服务器请求，这可能会减慢页面加载速度。我的项目需要我减少由HTML文档代码发出的请求数量。无论如何，我将尝试您的答案并进行试错。在测试一下后，我会回来的。

- Jayapal Chandran

我认为你想要实现的是一种延迟加载效果。这里有一个jQuery插件的链接：http://www.appelsiini.net/projects/lazyload。 - Q_Mlilo

这些图片有多大？你的问题是否与服务器请求过多有关？除了上面那位“雷斯塔忍者”的懒加载解决方案外，你还可以使用精灵图。这样一来，一旦精灵图被缓存，就可以确保用户端拥有所有所需的图片。此外，这只需要一个服务器请求而不是多个。 - Ravindra Sane