0

我知道这已经被问了很多，但我需要在加载内容之前尽可能简单地显示加载图像，确切地说 Facebook 的注册表单和许多其他网站的情况。

    $("#signUpPanel").click(function(){
      $("#headInner").html("<img class='spinner' src='imgs/spinner.gif'>");
        $("#headInner").load("signUp.php");
 });

这是我迄今为止所拥有的，它显示出来，但几乎不可能看到它。我正在考虑使用 delay() 函数或类似的东西，在此先感谢，如果可以的话，让它尽可能简单。

4

5 回答 5

3

您应该在触发点击之前在某处预加载图像
为什么使用延迟，没有人愿意等待额外的时间只是看到加载图像，如果内容加载速度足够快而看不到加载图像，您应该很高兴。

于 2012-05-10T22:44:01.757 回答
0 
$("#signUpPanel").click(function(){
  $("#headInner").html("<img class='spinner' src='imgs/spinner.gif'>");
  setTimeout(function(){$("#headInner").load("signUp.php");},1000);  
 });
于 2012-05-10T22:42:26.907 回答
0

正确的方法：

 $("#signUpPanel").click(function(){
     // in this way after image loaded, page will be load ...
     $('<img class='spinner' src='imgs/spinner.gif' />').load(function(){
         $("#headInner").html($(this));
         $("#headInner").load("signUp.php");
     });

 });
于 2012-05-10T23:19:26.150 回答
0

问题是你正在添加到 dom。你需要这样做。

$('#headerInner').addClass('loadingClass');

.loadingClass { background-image: url('imgs/spinner.gif') }

$('#headerInner').removeClass('loadingClass');
于 2012-05-10T23:20:00.263 回答
0 
var img = $('<img/>')[0].src = 'imgs/spinner.gif'; //preload
    img.className = 'spinner'; //add class

$("#signUpPanel").on('click', function(){
    $("#headInner").html(img).load("signUp.php"); //load will remove the image
});

如果甚至无法看到它，则加载速度足够快，以至于使用微调器通常是个坏主意。

延迟一个功能只是为了展示你的酷炫微调器与增强你的网站相反。

于 2012-05-10T23:26:08.900 回答