如何添加预加载器来加载内容 div jquery？

Question

您好，我有这个 jQuery 可以使用按钮代码将内容加载到 div，但是您正在加载的内容包括尺寸很大的图像，并且希望在加载时显示div预加载一个gif动画，怎么会导致出来？

代码jquery:

function chargue(div, of)
{
$(div).load(of, function() {
});
}

按钮：

<a href="#next" onClick="chargue('#left','change.php')">CHANGE</a>

CSS div #left:

#left {
    width: 744px;
    float: left;
    height: 100%;
    position:relative;
}

Answer 1

您只需将 div 的内容更改为动画加载 gif，然后当您的 ajax get() 完成后，将您的 div 内容替换为结果。

function chargue(div, of)
{
  //insert loading gif
  $(div).html('<img src="image/loading.gif">');

  //fetch larger images
  $.get(of, function(results) {
    $(div).html(results);
  });
}

Answer 2

function chargue(div, of)
{ 
    $('#loader').show();
    $(div).load(of, function(response, status, xhr) { 
      if(status == 'success'){ 
        $('#loader').hide();
      }
   });
}

请在#leftdiv下创建一个childdiv。并将你的加载程序 gif 放入其中。注意：#loder div 应该默认隐藏。

如何添加预加载器来加载内容 div jquery？

How I could add a preloader to load content div jquery?

jquery

onclick

preloader