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

Question

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

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

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

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

3. 我希望preloading和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，如果图像已经可用，则会执行其余的操作。