这是我想使用 jQuery 控制的一些示例代码(黑色页面背景上的白色按钮背景):
<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() {
});
and
$(window).load(function() {
$(.buttons);
});
我不太了解 jQuery,不知道这是否会强制代码等到所有元素加载后才出现。我宁愿强制按钮代码中的列表项元素延迟出现在页面上,直到 bg img sprite 完全加载。
感谢您的帮助和建议!