javascript 预加载图像 - 检查图像是否被缓存/加载以防止预加载

Question

我有一些疑问，我已经确定，但仍然想非常精确。

如果这是重复的问题，请给我链接，以便我删除这个问题并将引用提供的链接

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

2. 如果我们要预加载，那么我们使用 JavaScript 代码来预加载发送请求。 我们在 html 文档中也有相同图像的 img src。浏览器将请求图像两次。一个是在预加载时，另一个是在看到 img 标签时？

3. 我希望预加载和img src进程都是异步的。我希望链接像 obj.src = path 这样的图像时所采取的资源和请求是相同的。

4. 我希望预加载不会像同步 Ajax 那样工作。也就是说，通过给予优先级

   ，

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

6. 我还漏掉了几个问题吗？如果是这样，那么请提供这些答案，以便堆栈溢出用户可以更新。

只要是或否就好了。如果可能的话，我希望有一些外部参考或建议或答案的链接。

谢谢。

Answer 1

您可以检查 .complete 属性，如果图像已缓存，它应该大部分都是正确的。

如果您在缓存它们时预加载它们，则不会导致太多网络流量。您是否想节省内存？

您可以通过 ajax 执行 head 请求，如果它返回 304 而不是 200，则意味着它在缓存中。

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

Answer 2

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，然后它会完成其余的工作，如果图像已经可用，则请求下一个图像。