显示使用页面加载页面时加载的gif文件 [英] showing loading gif file while page gets loaded using jquery

问题描述

我正在使用JQuery.

I am using JQuery.

我在下面的jquery中显示了页面片段，它在加载主页面时加载了页面片段.

I am having below jquery which I am using to show the page fragment, it load the page fragment while the main page is loading.

$(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提取的代码.

Now I want to show the loading.gif while jquery loads the page. Below is the code taken from above jquery where I am trying to load page.

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

                }); 

请提出建议，因为加载页面片段会花费一些时间.

Please suggest as it is taking sometime to load the page fragment.

谢谢.

最好的问候， MS

推荐答案

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

If you want the image to be visible for all fragments while the fragment is loading, just add it to the element from start:

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

如果只希望图像在加载时试图查看的片段可见，则添加图像并从头开始隐藏它:

If you want the image only to be visible for the fragment that you are trying to view while it's loading, add the image and hide it from start:

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

这篇关于显示使用页面加载页面时加载的gif文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！