Question

所以我开始这个小项目，网络应用程序，它使用了大量的小图像和一些mp3声音，但我不满意新的图像和声音随着时间的推移加载，因为用户发现新的“地方”，所以我来了解决方案使用$.ajax GET方法加载所有图形和声音，然后在一切就绪后显示页面。这是代码：

    var i;
    for(i = 0; i < this.imagesNumber; i = i + 1) {
        (function(i) {
            $.ajax({
                url: self.images[i], // for example 'images/arrow.png'
                type: 'GET',
                complete: function(data) {
                    console.log("Completed.", i, self.images[i]);
                },
                progress: function(event) {
                    if (event.lengthComputable) {
                        console.log("Loaded " + parseInt( (event.loaded / event.total * 100), 10) + "%");
                    } else {
                        console.log("Length not computable.");
                    }
                }
            });
        }(i));
    }

然后我做：

this.loadAssets();
$(window).load(function() {
    app.initialize();
});

它实际上是在下载所有内容，但是当我尝试使用页面上的某些元素时，其中一些元素会继续下载（只有一些是从缓存中加载的。要检查我是否在google chrom网络选项卡中监控所有内容

那么jquery内部资产调用和我的ajax调用之间有什么区别？我错过了什么？

Answer 1

我在几周前的一个纸牌游戏中遇到了同样的问题。问题在于一些浏览器如何处理通过异步方式加载的图像的缓存。我可以在笔记本电脑上的Firefox中复制此问题，但不能复制我的电脑。我不确定实际问题是什么，但我知道如何进行创可贴修复。

只需将图片或资源加载到主Javascript文件中即可。生成页面时会加载这些文件，并将其存储在缓存中页面的相应本地副本中。但是，通过Ajax缓存的文件并不总是保存在与当前页面相同的位置，具体取决于加载过程中经过的时间。我相信这是引起这种意外行为的关键设置，因为它根据不同浏览器的设置，不同的缓存攻击性等因系统而异。等任何与页面一起保存在缓存中的文件都会立即加载（如预期的那样），但是，根据您的要求，任何保存在 not 中的文件都需要重新加载。如果这些后续重新加载再次保存在不同的位置，您将不得不一次又一次地重新加载这些文件。

因此，您使用Ajax调用加载的所有文件都会在没有Ajax调用的主Javascript中加载它们。对于您的迷你游戏，这是可以的，因为用户将期待一个加载期。只要确保他们知道它正在发生，就不会有任何伤害。

在显示页面之前使用jquery ajax加载图像和声音

1 个答案: