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

Question

现有一个需求：点击列表进入详情页，详情页中有图片展示1.首次进入如果图片加载完毕了，关闭loading2.如果再次进入，浏览器缓存了这个图片，则不再显示loading3.如果这个列表不包含图片，点进去后不显示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('图片下载成功！');

}