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

jv4diomz 于 2023-01-01 发布在 Java

关注(0)|答案(3)|浏览(143)

我正在使用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>

JavaScript

来源：https://stackoverflow.com/questions/19808851/how-to-show-progress-bar-while-loading-page-in-div-using-jquery

3条答案

按热度按时间

sqougxex1#

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

赞(0）回复(0）举报 2023-01-01

f1tvaqid2#

在调用之前添加脚本以模拟加载，在调用完成后删除。
示例：

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

网页：

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

赞(0）回复(0）举报 2023-01-01

vc6uscn93#

使用成功方法

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

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

    return false;

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

赞(0）回复(0）举报 2023-01-01

我来回答

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

3条答案

相关问题

热门标签

最新问答