如何加载html文本,直到加载背景图像精灵?
这是我想用jQuery控制的一些示例代码(黑页bg上的白色按钮bg):
在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完全加载。
感谢您的帮助和建议!
我认为您不能专门为背景图像附加加载事件。
试试这个:
使.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(); });
我认为你走在正确的轨道上。 JQuery的加载函数在所选元素完全加载后执行 – 意味着所有内容都被下载。 问题在于您的代码,按钮标记将在下载内容之前下载。 因此,您可以使用jQuery通过load事件完全显示按钮。 因此,设置隐藏在CSS中的按钮(可见性:隐藏)。 然后,使用$(document).load(function(){})来显示按钮:
$(window).load(function(){ $('.button').css({visibility: 'visible'}); })
把你的代码写进去
$(document).ready(function(){ //your logic here });
这确保您的DOM操作在DOM被完全填充之后开始…
再加上你也可以使用
$("#yourDOMelementID").ready(function(){ });
确保准备好操作预期的元素……
更多延迟事件处理程序你可以使用.setTimeOut()
或在某些情况下.delay()
将按钮设置为最初隐藏,然后对li执行jquery 加载 ,因为这是应用了背景图像的内容:
$('.buttons li').load(function() { $('.buttons').show(); });