如何在使用Jquery在div中加载页面时显示进度条

时间:2013-11-06 09:54:48

标签: javascript html asp.net jquery

我使用jQuery.Load(“#divid”,“pageURL”)在一个div中加载另一个页面;

我在锚标签上有锚标签点击我正在调用jQuery.load(“#divid”,“pageURL”);函数此函数需要时间来加载该div中的页面,所以我想显示加载图像并更改光标样式。

以下是我目前使用的代码段。 在script.js文件中我写了这样的函数

function loadReview(el) {

    jQuery("#productName1").load(el);

    return false;
}

我在.aspx页面里面有锚标签。

<a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'></a>

3 个答案:

答案 0 :(得分:0)

jQuery( "#productName1" ).load(el, function() {
   //loaded
   jQuery("#productName1").addClass("loaded");
});

在你的css中有这样的东西:

#productName1 {
   background-image: url('images/loading.gif');
   background-position: center center;
}

#productName1.loaded {
   background-image: none;
}

答案 1 :(得分:0)

添加一个脚本来模拟呼叫前的加载以及呼叫结束时,删除。

示例:

function loadReview(el) {
    // add a gif loading in a div loader
    jQuery("div.loadingDiv").html('<img src="link gif loading" />');
    jQuery("div.loadingDiv").show();
    jQuery("#productName1").load(el, function() {
        jQuery("div.loadingDiv").hide();
    });

    return false;
}

HTML:

<div class="loadingDiv" style="display:none"></div>
<a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'></a>

答案 2 :(得分:0)

使用成功方法

function loadReview(el) {
    $("div.loaderDiv").html('<img src="imglink" />');
    $("div.loaderDiv").show();

    $("#productName1").load(el);

    return false;

    success: $("div.loaderDiv").hide();
}