显示使用jquery加载页面时加载gif文件
问题描述:
我正在使用JQuery。显示使用jquery加载页面时加载gif文件
我正在使用下面的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
答
如果你想要的形象为所有片段可见,而片段加载,只是把它从开始添加的元素:
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);
感谢Guffa,可否请您让我知道你是什么意思的“添加图像,并从开始隐藏:”上面这两个代码看起来都是一样的,请建议 – 2010-10-24 11:19:16
@解决方案:第一个示例将加载内容,然后在内容隐藏时隐藏div (在内容被添加到div之后,并且在浏览器即将显示之前),而第二个示例将从开始隐藏div并将内容加载到隐藏的div中。 – Guffa 2010-10-24 11:35:38
非常感谢Guffa的帮助和建议!,它对我的工作很好 – 2010-10-25 05:43:27