如何延迟HTML文本显示，直到加载背景图片精灵？ [英] How do I delay html text from appearing until background image sprite is loaded?

问题描述

这里是一些示例代码，我想使用jQuery控制（白色按钮bg黑页bg）：

Here's some sample code that I want to control using jQuery (white button bg on black page 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文件中，我有以下内容：

In the CSS file, I have the following:

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

我已将这些列表项设置为类似可点击的按钮，背景精灵有助于填充

I have styled these list items to look like clickable buttons with the background sprite helping to fill out the background of the buttons.

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

My client doesn't like that in Firefox and Safari, when the page loads for the first time, the text inside the anchor loads first then the background sprite of the li (which is around 150kb b/c I have a total of 6 buttons) loads only when the sprite is fully downloaded. The background suddenly appears after a couple of seconds of downloading leaving the text in the anchor by itself until the background pops in.

我试图玩下面的代码希望它会延迟加载这个标记和CSS：

I have tried playing with the following code in hopes that it would delay the loading of this markup and CSS:

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

和

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

我不明白jQuery足以知道是否强制代码等待所有元素加载之前出现。我宁愿强制按钮代码中的列表项元素延迟出现在页面上，直到bg img sprite完全加载。

I do not understand jQuery enough to know if this forces the code to wait until all elements load before appearing. I'd rather force the list item elements in the buttons code to delay appearing on the page until the bg img sprite is completely loaded.

感谢您的帮助和建议！

Thanks for your help and suggestions!

推荐答案

我不认为您可以为背景图片附加加载事件。

I don't think you can attach a load event specifically for background images.

尝试这样：

使 .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中，使用您的sprite的URL创建一个图像，

Then in your jQuery, create an image with the URL of your sprite, and attach a load handler to it that will show the buttons.

$(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();
});

这篇关于如何延迟HTML文本显示，直到加载背景图片精灵？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！