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('图片下载成功！');}