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

【问题标题】：Jquery Show Image Before .load()Jquery在.load（）之前显示图像
【发布时间】：2017-03-15 21:26:34
【问题描述】：

我知道这个问题已经问了很多了，但我需要在加载内容之前尽可能简单地显示加载图像，这正是 Facebook 的注册表单和许多其他网站的样子。

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

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

【问题讨论】：

在加载内容时显示图像似乎是一件好事，但故意减慢加载速度以显示图像似乎相当反效果。如果您有实际延迟，图片会显示，但如果您的页面在 0.0001 秒内加载，您应该很高兴，不要试图让它看起来您的页面需要更长的时间来加载。

标签： javascript jquery html load spinner

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

谢谢，这正是我想要的，我真的很感激
如果这解决了您的问题，接受其中一个答案怎么样：)

【解决方案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");
     });

 });

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

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

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

【讨论】：

这是最简单直接的代码。使用它作为背景图片，您可以让它显示在您想要的位置。