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

因此，我开始了这个小项目，即网络应用程序，该应用程序使用了大量的小图像和一些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调用之间有什么区别？我错过了什么？