js如何根据图片是否已经缓存展现loading动画？

Question

现有一个需求：点击列表进入详情页，详情页中有图片展示
1.首次进入如果图片加载完毕了，关闭loading
2.如果再次进入，浏览器缓存了这个图片，则不再显示loading
3.如果这个列表不包含图片，点进去后不显示loading

我用了个笨办法，一进去判断img的src是不是空，不是空就loading动画，然后使用jquery的.load()判断加载完毕后关闭

$(function(){    
    if($("#img").attr("src").length==0){
        layer.msg('Loading...', {
               icon: 16,
               shade: 0.01,
              time: 3000
          });
    }
    
    $("img").load(function(){
        layer.closeAll('loading');
    })
});

但这里有个问题，如果图片缓存了，进入仍然开启loading动画，但图片是直接显示的，求助可否能根据缓存来显示loading，或者我这个做法不对，有更好的方案？给个思路即可，有简单的伪代码更好，谢谢！

Answer 1

var url = "http://......../image.jpg";
var img = new Image();
img.src = url;
 
if(img.complete) {
    alert('该图片已经存在于缓存之中，不会再去重新下载');
}else{
    alert('图片不存在缓存之中');
    img.onload = function() {
    alert('图片下载成功！');
}

Answer 2

可以试试用session存一个标识，不同状态改变这个标识的值。

Answer 3

可以用代理的方式来处理：

let imgLoader = new Proxy(function(img,src){
        img.src = src;
    },{
    apply : function(target,ctx,args){

        let img = args[0];

        img.src = "loading.gif";

        let promise = new Promise(function(success,fail){

            let tempImg = document.createElement("img");

            if(tempImg.complete){
                success(tempImg);
            } else {
                tempImg.onload = function(){
                    success(tempImg);
                };
            }

            tempImg.onerror = function(){
                fail(status);
            };

            tempImg.src = src;

        });

        promise.then(function(value){
            Reflect.apply(target,ctx,args);
        },function(){
            alert("加载出错");
        });

    }
});
imgLoader(document.querySelector("img"),"1.png");

Answer 4

HTML DOM readyState属性可以看看