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

问题描述

问 题

现有一个需求：点击列表进入详情页，详情页中有图片展示
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，或者我这个做法不对，有更好的方案？给个思路即可，有简单的伪代码更好，谢谢！

解决方案

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

这篇关于javascript - js如何根据图片是否已经缓存展现loading动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！