[英]How to show Progress bar while loading page in div using Jquery
I am loading another page in one div using jQuery.Load("#divid","pageURL");我正在使用 jQuery.Load("#divid","pageURL"); 在一个 div 中加载另一个页面。
I have anchor tag on that anchor tag click I am calling jQuery.load("#divid","pageURL");我在那个锚标签上有锚标签点击我正在调用 jQuery.load("#divid","pageURL"); function this function takes time to load page in that div, so I want to show loading image and changing the cursor style. function 这个函数需要时间在那个 div 中加载页面,所以我想显示加载图像和更改光标样式。
Below is the code snippet which I am using currently.下面是我目前使用的代码片段。 in script.js file I have written function like that在 script.js 文件中,我编写了这样的函数
function loadReview(el) {
jQuery("#productName1").load(el);
return false;
}
and I have anchor tag inside .aspx page like that.我在 .aspx 页面中有这样的锚标记。
<a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'></a>
jQuery( "#productName1" ).load(el, function() {
//loaded
jQuery("#productName1").addClass("loaded");
});
with in your css something like this:在你的 css 中是这样的:
#productName1 {
background-image: url('images/loading.gif');
background-position: center center;
}
#productName1.loaded {
background-image: none;
}
add a script to simulate loading before the call and when the call is finished, remove.在调用之前添加脚本来模拟加载,调用完成后,删除。
example:例子:
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: html:
<div class="loadingDiv" style="display:none"></div>
<a onclick='loadReview(\"" + strexternalURL + "\");' href='#productName1'></a>
Use success method使用成功方法
function loadReview(el) {
$("div.loaderDiv").html('<img src="imglink" />');
$("div.loaderDiv").show();
$("#productName1").load(el);
return false;
success: $("div.loaderDiv").hide();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.