javascript - 使用已经预加载的图片做序列帧循环的时候为什么依然会跑出很多的图片请求？

Question

需求是制作一个序列帧动画，因为图片的请求量很多，为了防止在循环过程中图片加载不出来，所以我使用了jquery.imgpreload做了图片预加载，但是在循环的过程中发现我写的那个序列帧函数并没有读取本地已经缓存下来的图片，而是继续发送请求（chrome开发者工具里面看到有图片请求一直在跑）。不知道这是为什么。

chrome开发者工具

这些图是之前我已经预加载过的，但是在跑序列帧函数的时候却又重新跑了出来。

序列帧函数：

function sequenceImgFun(elent,num,luji,bool,pic,time,name){
    var i=2;
    name = window.setInterval(function(){
        if(i < num){
            elent.attr('src','images/'+luji+'/('+i+').'+pic+'');
            i++;
        }else{
            if(bool){
                i = 2;
            }else{
                window.clearInterval(name);
            }
        }
    },time);
    return name;
}
var xhGuang = sequenceImgFun(guangImg,59,'guang',true,'jpg',1000/25,'guangImg');

Answer 1

它的 HTTP 狀態碼是 304，已經緩存了。

Answer 2

每次atrr都重置了一遍src属性

function sequenceImgFun(elent,num,luji,bool,pic,time,name){
    var i=2;
    name = window.setInterval(function(){
        if(i < num){
            var src = 'images/'+luji+'/('+i+').'+pic+'';
            var esrc =    elent.attr('src',);     
            if( src != esrc){
             elent.attr('src',src); 
            }
            i++;
        }else{
            if(bool){
                i = 2;
            }else{
                window.clearInterval(name);
            }
        }
    },time);
    return name;
}
var xhGuang = sequenceImgFun(guangImg,59,'guang',true,'jpg',1000/25,'guangImg');