如何延迟 html 文本的显示，直到加载背景图像精灵？

Question

下面是我想要使用 jQuery 控制的一些示例代码（黑色页面 bg 上的白色按钮 bg）：

    <ul class="buttons">
        <li class="button-displays"><a href="/products/">Products and Services for the company</a></li>
        <li class="button-packaging"><a href="/packaging/">Successful packaging services for the company</a></li>
        <li class="button-tools"><a href="/tools/">Data, mail and print tools for your company</li>
    </ul>

在 CSS 文件中，我有以下内容：

    .buttons li { background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; }
    .button-displays { background-position: 0 125px; }
    .button-packaging { background-position: 0 250px; }
    .button-tools { background-position: 0 375px; }

我将这些列表项的样式设置为看起来像可点击的按钮，并使用背景精灵帮助填充按钮的背景。

我的客户不喜欢 Firefox 和 Safari，当页面第一次加载时，锚点内的文本首先加载，然后是 li 的背景精灵（大约 150kb b/c 我总共有 6 个按钮）仅在精灵完全下载后加载。下载几秒钟后，背景突然出现，将文本留在锚点中，直到背景弹出。

我尝试使用以下代码，希望它会延迟此标记和 CSS 的加载：

    $('.buttons li a').load(function() {
    });

确实

    $(window).load(function() {
        $(.buttons);
    });

我 这么做了对 jQuery 的了解不够，不知道这是否会强制代码等待所有元素加载后再出现。我宁愿强制按钮代码中的列表项元素延迟出现在页面上，直到 bg img sprite 完全加载。

感谢您的帮助和建议！

Answer 1

我认为您不能附加专门用于背景图像的加载事件。

请尝试以下操作：

将 .button li 元素设置为 display:none：

.buttons li { display:none; background-image: url(images/sprite.png); height:126px; width:293px; float:left; margin:0 0 0 9px; }

然后在 jQuery 中，使用精灵的 URL 创建一个图像，并附加一个 load 处理程序将显示按钮。

$(function() {
      // create a dummy image
    var img = new Image();

      // give it a single load handler
    $(img).one('load',function() {
        $('.buttons li').fadeIn(); // fade in the elements when the image loads
    });

      // give it the src of your background image
    img.src = "images/sprite.png";

      // make sure if fires in case it was cached
    if( img.complete )
        $(img).load();
});

Answer 2

我认为你走在正确的道路上。 JQuery 的加载函数在所选元素完全完成加载后执行 - 这意味着所有内容都已下载。问题在于您的代码，按钮标记将在下载内容之前下载。因此，您可以使用 jQuery 通过加载事件完全显示按钮。因此，将按钮设置为隐藏在 CSS 中（可见性：隐藏）。然后，使用 $(document).load(function(){}) 显示按钮：

$(window).load(function(){
    $('.button').css({visibility: 'visible'});
})

Answer 3

在其中编写代码

$(document).ready(function(){

//your logic here 

});

可确保您的 DOM 操作在 DOM 完全加载后开始...

此外，您还可以使用它

$("#yourDOMelementID").ready(function(){

});

来确保预期的元素已准备好进行操作...

更多的是延迟事件处理程序，您可以使用 .setTimeOut() 或在某些情况下 .delay()

Answer 4

最初将按钮设置为隐藏，然后在 li 上执行 jquery load ，因为这是背景图像应用了什么：

$('.buttons li').load(function() {
        $('.buttons').show();
    });