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

                });

请建议加载页面片段需要一段时间。

感谢。

最诚挚的问候， MS

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

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

1 个答案: