jquery - 使用 jQuery 预加载 CSS Sprite 图像

Question

我想用 jquery 或 JavaScript 预加载两个 Sprite 图像，这些 Sprite 图像在页面完全加载后才会显示。我试过this , this , this , this还有更多，但它们都不适合我。然而，一个简单的基于 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");

        });

请提出任何可行的方法。

谢谢。

Answer 1

批量图片预加载:

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];
    }
}