在构建页面之前,我的加载图像消失了。 在我的类别页面中,我进行了一个ajax调用,该调用将给我一个来自后端的模型对象,该对象将用于显示产品。
流程对我的如下代码有点奇怪
it first displays -> before loadProductsGrid::::>
loading image is shown
and then it displays --> after loadProductsGrid::::> loading image is shown.
After that loading image is hidden.
actual html content from the model is loaded in products-grid. (ie from loadProductsGrid)
预计会看到
first should display -> before loadProductsGrid::::>
loading image is displayed
actual html content from the model is loaded in products-grid. (ie from loadProductsGrid)
and then it should display --> after loadProductsGrid::::> with loading image displayed.
After that loading image should need to be hidden.
我的jsp代码如下所示
<div class="category-products">
<div align="center" class="loadingImageDiv" id="loadingImageDiv">
<img align="center" src="${loadingImgUrl}" class="loading">
</div>
<ol class="products-grid" id="products-grid">
</ol>
</div>
我的脚本如下所示
$(function(){
loadCategoryProducts();
// construct url
url = "url will be constructed";
alert("before loadProductsGrid::::>");
$('#loadingImageDiv').show();
loadProductsGrid(url,'#products-grid');
alert("after loadProductsGrid::::>");
$('#loadingImageDiv').hide();
});
function loadProductsGrid(url,divProductsContainer) {
$.ajax({
type: 'POST',
dataType: "json",
url: url,
success: function(productGrid) {
buildProductsGrid(productGrid,divProductsContainer);
// loads the products (huge) using productGrid model object in divProductsContainer
$('#loadingImageDiv').hide();
},
complete: function(){
alert("complete");
$('#loadingImageDiv').hide();
// $('.loadingImageDiv').css("visibility", "hidden");
},
error: function(jqXHR,textStatus,errorThrown) {
$('#loadingImageDiv').hide();
alert('Error ' + jqXHR + "-" + textStatus + "-" + errorThrown);
}
});
}
感谢您的帮助。
谢谢