使用 jQuery 预加载 CSS 精灵图像答案

【问题标题】：Pre load CSS sprite Images with jQuery使用 jQuery 预加载 CSS 精灵图像
【发布时间】：2013-03-12 22:21:36
【问题描述】：

我想用 jquery 或 JavaScript 预加载两个精灵图像，这些精灵图像在页面完全加载之前不会显示。我尝试过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");

        });

请提出任何可能的方法。

谢谢。

【问题讨论】：

好吧，对我来说，这段代码有效，虽然我没有精灵...，但 FF 尝试加载它们。但也许使用 $(function () {...}) 而不是 $(window).load()...
使用$(function () {...}) 不起作用，因为它在文档就绪状态下触发。
为什么？然后你就可以完美地插入一些东西到身体上，让它被加载......
也许 $(window).load 不起作用，因为它存在一些问题并且已被弃用：api.jquery.com/load-event 无论如何，我不知道您的问题是什么，因为此代码非常适合我......你对“这对我不起作用”到底是什么意思
表示布局精灵图像没有首先加载。

标签： jquery html css css-sprites

【解决方案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];
    }
}

【讨论】：

【解决方案2】：

为什么这么难？！？

只是做：

<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>

这就行了。不需要任何标记。

【讨论】：