Question

我知道这已被提出了很多要求，但我需要尽可能简单地在加载内容之前显示加载图片，以及Facebook的注册表单和其他许多网站。

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

这是我迄今为止所展示的内容，但它几乎不可能看到它。我正在考虑使用delay（）函数或类似的东西，提前感谢并尽可能保持简单。

Answer 1

你应该在触发点击之前的某个地方预加载图像为什么要使用延迟，没有人想等待额外的时间只看到加载图像，如果内容加载速度足够快，看不到加载图像你应该感到高兴。

Answer 2

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

Answer 3

正确的方式：

 $("#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");
     });

 });

Answer 4

问题是你要加入dom。你需要这样做。

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

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

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

Answer 5

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
});

如果连它都看不到，那么负载就足够快，以至于旋转器通常是一个坏主意。

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

Jquery在.load（）之前显示图像

5 个答案: