如何显示加载图像每当标签页加载时

问题描述：

我尝试使用'select'事件。

$(function() { 
    $('#my-tabs').tabs({ 
     select: function (event, ui) { 
      var idx = $('#my-tabs').tabs('option', 'selected'); 
      $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 
     } 
    }); 
});

如果第二次选中标签页，它工作正常，但第一次页面加载时不起作用。

如何解决这个问题，有什么想法？

谢谢。

PS。对不起我的英语不好。

答

您可以在每次发布ajax请求时显示加载指示符，如我的博客文章中所述。

http://yekmer.posterous.com/show-loading-spinner-automatically-using-jque

答

现在正是我想要的工作。我将我的方法与Yekmer Simsek方法相结合。代码看起来像这样。

$(function() { 
    $('#my-tabs').tabs({ 
     ajaxOptions: { 
      beforeSend: function() { 
       var idx = $('#my-tabs').tabs('option', 'selected'); 
       $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 
      }, 
     }, 
     select: function (event, ui) { 
      var idx = $('#my-tabs').tabs('option', 'selected'); 
      $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>'); 
     } 
    }); 
});

但必须将此代码放置在两个位置。

var idx = $('#my-tabs').tabs('option', 'selected'); 
$($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>');

还有其他方法吗？

如何显示加载图像每当标签页加载时

相关推荐