在使用 jquery 加载页面时显示加载 gif 文件

Question

我正在使用 JQuery。

我正在使用下面的 jquery 来显示页面片段，它会在加载主页时加载页面片段。

$(document).ready(function() 
{
        $(".load-fragment").each(function()         
        {          
            var $objThis = $(this);
            var fname = $objThis.attr("href");
            var dynDivID = "divContent"+ $objThis.attr("id"); 
            var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function ()
            {               
                $(this).hide(); //Hiding all the newly created DIVs

            });          
            newDiv.addClass('dynDiv');  //Adding CSS to newly created Dynamic Divs 

            $("#column2").append(newDiv); //adding new div in div column2 
        });    

        $(".load-fragment").click(function() 
        {
            // load page on click  
            var $thiz = $(this); //making the current object   
            $thiz.attr("href", "#");         
            $(".tabs-nav li").removeClass("tabs-selected"); //removing the css from the li
            $thiz.parent().addClass("tabs-selected"); //adding the selected class to the parent on click
            $("#tabs-container").hide(); //playing with hide and show
            $('.dynDiv').hide();
            $("#divContent" + $thiz.attr("id")).show();  
        });     
}); 

现在我想在 jquery 加载页面时显示 loading.gif。下面是我试图加载页面的 jquery 上面的代码。

var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function ()
                {               
                    $(this).hide(); //Hiding all the newly created DIVs

                }); 

请提出建议，因为加载页面片段需要一些时间。

谢谢。

最好的问候， 女士

Answer 1

如果您希望在片段加载时图像对所有片段可见，只需从开始将其添加到元素：

var newDiv =
  $("<div>").attr("id",dynDivID)
  .load(fname + " #tabs-container",function () {               
    $(this).hide();
  })
  .addClass('dynDiv')
  .append($('<img/>').attr({ src: 'loading.gif', alt: '' }));
$("#column2").append(newDiv);

如果您希望图像仅对您尝试在加载时查看的片段可见，请添加图像并将其从开始隐藏：

var newDiv =
  $("<div>").attr("id",dynDivID)
  .load(fname + " #tabs-container")
  .hide()
  .addClass('dynDiv')
  .append($('<img/>').attr({ src: 'loading.gif', alt: '' }));
$("#column2").append(newDiv);