gpt4 book ai didi

jquery - 如何延迟显示 html 文本,直到加载背景图像 Sprite ?

转载 作者:技术小花猫 更新时间:2023-10-29 12:04:12 25 4
gpt4 key购买 nike

这是我想使用 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; }

我将这些列表项设置为看起来像可点击的按钮,背景 Sprite 有助于填充按钮的背景。

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

我尝试使用以下代码,希望它能延迟此标记和 CSS 的加载:

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

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

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

感谢您的帮助和建议!

最佳答案

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

试试这个:

制作.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 创建一个图像,并向其附加一个将显示按钮的 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();
});

关于jquery - 如何延迟显示 html 文本,直到加载背景图像 Sprite ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4937127/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com