目前,我的代码显示了一个加载微调器gif,返回数据并缓存它。但是,一旦数据被缓存,加载gif会在加载数据之前瞬间闪烁一瞬间。它会分散注意力,我想摆脱它。我想我在beforeSend
函数中使用了错误的方法:
$.ajax({
type : "GET",
cache : false,
url : "book_data.php",
data : { keywords : keywords, page : page },
beforeSend : function() {
$('.jPag-pages li:not(.cached)').each(function (i) {
$('#searchResults').html('<p id="loader">Loading...<img src="../assets/images/ajax-loader.gif" alt="Loading..." /></p>');
});
},
success : function(data) {
$('.jPag-current').parent().addClass('cached');
$('#searchResults').replaceWith($(data).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd');
detailPage();
selectForm();
}
});
编辑:
从评论中尝试这一点,再次使用工作代码进行更新!
var timeout = setTimeout(function(){
$('#searchResults').html('<p id="loader">Loading...<img src="../assets/images/ajax-loader.gif" alt="Loading..." /></p>');
}, 500 );
$.ajax({
type : "GET",
cache : false,
url : "book_data.php",
data : { keywords : keywords, page : page },
beforeSend : function() {
timeout;
},
success : function(data) {
clearTimeout(timeout);
$('.jPag-current').parent().addClass('cached');
$('#searchResults').replaceWith($(data).find('#searchResults')).find('table.sortable tbody tr:odd').addClass('odd');
detailPage();
selectForm();
}
});
答案 0 :(得分:1)
你可以延迟显示加载gif大约四分之一秒左右,足以让它从高速显示它从缓存加载。