如何在加载背景图像精灵之前延迟 html 文本的出现？答案

【问题标题】：How do I delay html text from appearing until background image sprite is loaded?如何在加载背景图像精灵之前延迟 html 文本的出现？
【发布时间】：2011-06-23 15:42:36
【问题描述】：

这是我想使用 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 完全加载。

感谢您的帮助和建议！

【问题讨论】：

标签： jquery css load window background-image

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

【讨论】：

我不确定这种方法是否更好 b/c 最初显示：none 会破坏我在该区域的布局，然后当精灵加载时，它会突然跳转到正确的布局。然而，我确实尝试过，但什么也没发生。
@Micah，然后使用可见性代替显示，并将其设置为.css('visibility','visible') 而不是.fadeIn()。应该管用。在我的测试中运行良好。
...here's a working example。我使用了一个通用图像，并添加了一个alert()，这样你就可以看到它确实触发了。
Safari Web Inspector 在我使用此代码时给我一个错误：表达式'$' [undefined] 的结果不是函数。
@Micah：那么看起来你是在加载 jQuery 之前运行代码。

【解决方案2】：

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

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

【讨论】：

是的。帕特里克是对的。应该是“窗口”而不是“文档”。（代码更新）
这个方法刚刚奏效，但我必须将$ 替换为jQuery 才能使其工作，类似于上面的方法。这是为什么呢？

【解决方案3】：

在里面写代码

$(document).ready(function(){

//your logic here 

});

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

另外你也可以使用

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

});

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

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

【讨论】：

.ready() 是错误的函数。它会在加载标记后但在下载二进制数据之前触发。 .load() 是要使用的方法。

【解决方案4】：

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

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

【讨论】：