Question

对于延迟加载的可视化，我尝试将淡入动画样式类仅应用于未未缓存在浏览器中的图像。

要确定图像是否先前已加载并缓存在浏览器中，我们可以在以下函数中使用 HTMLImageElement.complete 属性：

const isImageCached = (imageSource) => {

    let image = new Image();
    image.src = imageSource;

    const isCached = image.complete;
    image.src = "";
    image = null;
    
    return isCached;
};

但是，在Chrome中，HTTP缓存项位于memory cache或disk cache中。以上功能仅在图像位于memory cache中时有效，而在图像位于disk cache中时始终返回false。我认为这是因为在0毫秒后会立即访问内存，而磁盘缓存最多可能需要花费几毫秒的时间才能检索到。

Code Test (JSFiddle)

首次打开并运行上述脚本时，由于尚未将其缓存在浏览器中，因此该图像逐渐淡入。按下“运行” 按钮重新运行脚本时，图像不会淡入，因为它现在已缓存在Chrome的memory cache中。如果已清除内存缓存，则会出现问题。图片已经被缓存，但是现在它可能位于disk cache中，因此图片会淡入。

下面是Chrome开发者工具的屏幕截图，其中详细说明了刷新页面（disk cache）之后重新运行脚本而无需刷新页面（memory cache）的情况：

在显示图像之前，是否可以在JavaScript中确定图像是否位于HTTP缓存中，memory cache或disk cache？

const image = document.querySelector("img");
const marioSrc = "https://www.pinclipart.com/picdir/big/361-3619269_mario-16-bit-mario-bros-super-mario-world.png";

const isImageCached = (imageSource) => {

    let image = new Image();
    image.src = imageSource;

    const result = image.complete;
    image.src = "";
    image = null;
    
    return result;
};

if (!isImageCached(marioSrc)) {
    image.classList.add("image-fade-in");
}

image.setAttribute("src", marioSrc);

:root {
    margin: 0;
    padding: 0;
}

body {
    background-color: #444444;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
}

@keyframes fade-in {

    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.image-fade-in {
    animation: fade-in 1s ease-in-out;
}

<img />

Answer 1

设置特定的等待时间来确定是否需要在浏览器磁盘缓存中放置图像，并且在大多数情况下，等待时间很小（<5毫秒），该值可能会根据事件循环而剧烈波动堆栈和硬件。

这可以通过兑现承诺来实现：加载图像与超时。

对于我的特定用例，如果图像在25毫秒内加载，我可以假定它已缓存，否则我将假定它从未加载过并应用淡入样式。

const promiseTimeout = (ms, promise, timeoutMessage = null) => {

    let timerID;

    const timer = new Promise((resolve, reject) => {

        timerID = setTimeout(() => reject(timeoutMessage), ms);
    });

    return Promise
        .race([ promise, timer ])
        .then((result) => {

            clearTimeout(timerID);

            return result;
        });
};

const imageURL = "https://dummyimage.com/600x400/000/fff.png&text=a";
let image = new Image();
    
const imageComplete = new Promise((resolve, reject) => {

    image.onload = () => resolve(image);
    image.onError = () => reject(image);
    
    image.src = imageURL;
});

promiseTimeout(25, imageComplete, "Not loaded from cache")
    .then((result) => console.log("Loaded from cache:", result))
    .catch((error) => {
        
        image.src = "";
        image = null;
        
        console.log(error);
    });

确定在显示图像之前是否在浏览器中缓存了图像（内存或磁盘缓存）？

1 个答案: