js判断一个图片是否已经存在于缓存

最新推荐文章于 2024-04-08 18:01:08 发布

原创最新推荐文章于 2024-04-08 18:01:08 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

js/jq 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了图片预加载及缓存机制的实现方法，通过JavaScript动态创建Image对象并利用其src属性加载图片资源。当图片已存在于浏览器缓存中，页面将直接使用缓存资源；若图片未被缓存，则触发图片下载，并在下载完成后执行相应回调。

参考 https://breese.iteye.com/blog/1880611

$img = [
    "/img/1.jpg",
    "/img/2.jpg"
]

var url = $img[this.mark];
var img = new Image();
img.src = url;

if (img.complete) {
    //该图片已经存在于缓存之中，不会再去重新下载
    plan = mark
} else {
    //图片不存在缓存之中
    img.onload = function () {
        //图片下载成功
    }
}