使用jQuery预加载CSS精灵图像

我想用jquery或JavaScript预加载两个精灵图像，这些精灵图像直到页面完全加载后才会显示。我试过，，，还有更多，但都不适合我。不过，一个简单的基于CSS HTML的解决方案是可行的。 但我有很多页面，所以我不能使用CSS HTML解决方案，相反，我想使用一些jquery解决方案，以便在一个单独的.js文件中工作，所有页面都可以访问

基于CSS Html的有效解决方案

    <div id="preload">
    <img src='_ls-global/images/layout-images/layout.png'/>
    <img src='_ls-global/images/layout-images/layout2.png'/>
    </div>

    <style>
    #preload{ display: none;}
    </style>

#预加载{显示：无；}

由于这个基于CSS HTML的解决方案正在运行，我使用jQuery实现了它，但它不起作用

        $(window).load(function(){

        $("<div/>", {
          "id": "preload",
          "css": { "display" : "none"},
        }).prependTo("body");
        $("<img src='_ls-global/images/layout-images/layout.png'/>").appendTo("#preload");
        $("<img src='_ls-global/images/layout-images/layout2.png'/>").appendTo("#preload");

        });

$（窗口）.load（函数（）{
$("", {
“id”：“预加载”，
“css”：{“display”：“none”}，
}).prependTo（“主体”）；
$（“”）。附加到（“#预加载”）；
$（“”）。附加到（“#预加载”）；
});

请提出任何可能的方法

谢谢。

为什么这么难

只要做：

<script>
    $(window).load(function(){
        new Image().src = '_ls-global/images/layout-images/layout.png';
        new Image().src = '_ls-global/images/layout-images/layout2.png';
    });
</script>

$（窗口）。加载（函数（）{
new Image（）.src='_ls-global/images/layout images/layout.png'；
new Image（）.src='_ls-global/images/layout images/layout2.png'；
});

---

这就是诀窍。无需任何标记。

批量图像预加载：

window.onload = function() {
    //preload images: set path, enter image names
    var path = '../images/';
    var images = [
        'my_image.png',
        'my_image2.png'
        ];

    for (image in images) {
        new Image().src = path + images[image];
    }
}

---

对我来说，这段代码很有效，虽然我没有精灵…，但FF尝试加载它们。但是可能使用$（函数（）{…}）而不是$（窗口）。使用

$（函数（）{…}）

加载（）…在文档就绪状态下无法工作。为什么？然后你可以完美地将一些东西插入到正文中，这样它就可以加载了…也许还有$（window）。加载不起作用，因为它有一些问题，而且它已被弃用：无论如何，我不知道你的问题是什么，因为这段代码对我来说非常有效。。。“那对我不起作用”意味着布局精灵图像没有首先加载，这到底是什么意思。