Javascript js path img src从数组[]加载并缓存，但仍然滞后

所以，可能是因为我是一个js或其他什么的初学者，但我有一个多图像动画，有一些性能问题

（我的DOM:

imgPath是来自django的{%static'路径'%}

然后我有我的“负载”：

function loadImgs() {
        if (i < totalImg) {
            if (i < 20) {
                $.ajax({
                    type: 'GET',
                    url: images[i],
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: false
                    },
                    complete: function() {
                        i++;
                        loadImgs();                     
                    }
                });
            }
          };

然后，当我分析xhr请求时，我看到所有内容都缓存在内存中，但当我滚动（滚动动画显示）时，服务器仍在发送GET请求：(

我做错了吗

我会祝福任何帮助哈哈

---

干杯

首先，我会在调试器中设置一个断点，在滚动之前在调试器中执行ajax调用。您也可以登录调试器，查看您正在请求的图像。另外，我会将

if（I

移动到

complete:function（）{/**if condition loadImgs（）；*/}

嗯，当我检查网络时，我可以看到图像被缓存了，然后它尝试再次调用它，认为它已经缓存了，然后取消了加载…这真的很奇怪，一定是我做错了什么。我想你观察到的是正常行为。如果你在Chrome的DevTools中打开网络选项卡，在状态列下，wh您看到的图像内容的状态代码是什么？请看视频，了解有关该主题的一些解释。我首先在调试器中设置一个断点，在滚动之前在调试器中执行ajax调用。您还可以登录调试器，以获取您要请求的图像。另外，我会移动

if（I

到

complete:function（）{/**if condition loadImgs（）；*/}

嗯，当我检查网络时，我可以看到图像被缓存了，然后它尝试再次调用它，认为它已经缓存了，然后取消了加载…这真的很奇怪，一定是我做错了什么。我想你观察到的是正常行为。如果你在Chrome的DevTools中打开网络选项卡，在状态列下，wh您看到的图像内容的状态码是什么？请看视频，了解有关该主题的一些说明。

var images = [
    imgPath + 'earth-png/a1.png',
    imgPath + 'earth-png/a2.png',
    imgPath + 'earth-png/a3.png',
    imgPath + 'earth-png/a4.png',
    ...

function loadImgs() {
        if (i < totalImg) {
            if (i < 20) {
                $.ajax({
                    type: 'GET',
                    url: images[i],
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: false
                    },
                    complete: function() {
                        i++;
                        loadImgs();                     
                    }
                });
            }
          };

var earthSpine = new TimelineMax();

        earthSpine
            .to(obj, 0.7, {
                curImg: images.length,
                roundProps: "curImg",
                immediateRender: true,
                ease: Linear.easeNone,
                onUpdate: function() {
                    //next image on update
                    earthSprite.src = images[obj.curImg];                   
                }
            });