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

Question

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

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

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

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

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

4. 我希望预加载不会像同步 Ajax 那样工作。那就是优先考虑

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

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

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

谢谢。

Answer 1

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

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

您可以通过 ajax 进行头部请求，如果它返回 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，其余的由它完成，如果图像已经可用，则请求下一个图像。