滞后的jquery预加载器图像

我正在使用jquery在加载主内容之前加载预加载图像。问题是，当我点击链接时，加载图像在显示之前至少需要5秒。我希望它能够在内容显示前点击链接立即显示。滞后的jquery预加载器图像

这里是jQuery的;

$(function() { 
    $("li#tabs.popup a").click(function(e) { 
     $("#popup").slideDown().addClass('active'); 
     $('#popup').html('<center><img src="images/loader.gif" /></center>'); 
     $('#popup').load('wishlist.php'); 
     $('li#tabs.popup a').removeClass('selected'); 
     $(this).addClass('selected'); 
     e.stopPropagation(); 
    }); 
});

经过多次的烦躁后，我找到了问题的答案。出于某种原因，将加载程序放在所有其他函数之上会使其加载顺利并立即点击。

因此，而不是上面的代码，我做

$(function() { 
    $("li#tabs.popup a").click(function(e) { 
     $('#popup').html('<center><img src="images/loader.gif" /></center>'); 
     $("#popup").slideDown().addClass('active'); 
     $('#popup').load('wishlist.php'); 
     $('li#tabs.popup a').removeClass('selected'); 
     $(this).addClass('selected'); 
     e.stopPropagation(); 
    }); 
});

现在它只是完美！

来源

2011-10-27 Jay Smoke

你的装载机镜像在哪里设置？也就是loader.gif实际上在被jquery设置之前在页面的任何位置使用？ – jammypeach

我想这是因为当你开始将图像显示为html内容时，它会加载并显示出来。您可能已经加载到页面，例如：

<div id="popup"> 
    <div id="spinner"> <!-- Assuming that it has display: none in CSS --> 
     <center><img src="images/loader.gif" alt="Loading..." /></center> 
    </div> 

    <!-- Load the content here. --> 
</div>

而且你的脚本会是什么样子

$(function() { 
    $("li#tabs.popup a").click(function(e) { 
     $('#popup').find('#spinner') 
        .show() 
        .end() 
        .load('wishlist.php') 
        .slideDown() 
        .addClass('active'); 

     $('li#tabs.popup a').removeClass('selected'); 
     $(this).addClass('selected'); 

     e.stopPropagation(); 
    }); 
});

旁注：你真的没有写$('li#tabs')，只需$('#tabs')（或更适当的$('.tabs')会这样做，当您将选择器设置为li#tabs时，它会导致Sizzle过滤document.getElementById('tabs')的结果以查看匹配元素的标记名是否为li。

来源

2011-10-27 10:15:37 Lapple

你的标题是有点混乱，这样看来你真的想你的预加载预压图像:)

我们已经在过去使用this script，以确保我们的CSS所有图像参考预装。然后，我会将您的“预加载”动画更改为使用css（您可以将背景图像设置为动画gif），而不是随时创建图像标签。

来源

2011-10-27 10:18:06

滞后的jquery预加载器图像

回答

相关问题