使用Javascript / JQuery在所有浏览器中预加载图像的有效方法？

Question

构建一个webapp，并且对于任何用户首次访问该站点，在加载并显示主页面之后，我想要预先加载11个大约50 KB的图像，因此用户不会等待当应用程序需要稍后显示它们时为他们。

这样做的目的只是为了让他们在网络外的浏览器缓存中 - 因为用户可能在手机上，甚至可能只使用2G移动连接。必须在主页完全加载和显示之后进行预加载，并且我还希望按顺序加载预加载的图像，而不是按顺序加载它们，因此希望序列中的第一个可用最快。

我想要使用类似的东西：

var img = new Image();

$(window).on('load', function() { preload_images(1); });

function preload_images(index) {
        if(index < 11) {
            img.onload = function() {
                preload_images(index + 1);
            }
            img.src = 'path_to_my_images/imagenum'+index+'.png';
}

所以基本上我希望浏览器尽可能少地使用内存，因此重用相同的图像定义。我不需要在这个阶段使用图像，只需让浏览器将它们从网络中移出并进入缓存。当它们被实际使用时，图像将被引用为背景图像，因为我将它们用于精灵（因此每个图像上都有许多精灵，我通过CSS偏移访问），并且将被引用他们原来的完整网址，我认为会从浏览器缓存中提取它们吗？

替代方案我想在DOM中创建一个图像元素并反复更改src属性，但onload事件是否仍然可以使用？

任何与上述相关的问题或有更好的方法吗？

非常感谢