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

load images and sounds with jquery ajax before displaying page

本文关键字：ajax jquery 加载 图像 声音 显示      更新时间：2023-09-26

所以我开始了这个小项目，Web应用程序，它使用了很多小图像和一些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();
});

它实际上是在下载所有的东西，但是当我尝试使用页面上的某些元素时，其中一些元素会再次继续下载（只有一些是从缓存中加载的。检查我是否从谷歌铬网络选项卡中监视所有这些。

那么 beetween jquery 内部资产调用和我的 ajax 调用有什么区别？

几周

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

只需将图像或资产的加载移动到主 Javascript 文件中即可。这些文件在生成页面时加载，并存储在缓存中页面的相应本地副本中。但是，通过 Ajax 缓存的文件并不总是保存在与当前页面相同的位置，具体取决于加载过程中经过的时间。我相信这是导致这种意外行为的关键设置，因为它根据不同浏览器的设置、不同的缓存侵略性等因系统而异。与页面一起保存在缓存中的任何文件都将立即加载（按预期），但任何未归属于您的页面的文件都需要根据请求重新加载。如果这些后续重新加载再次保存在不同的位置，您实际上必须一次又一次地重新加载这些文件。

因此，使用 Ajax 调用

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

相关文章：