目前我有这样的代码,每当点击时都会从外部PHP获取数据,但它向快速显示了我需要的是加载效果的一些延迟,我尝试了jQuery淡入慢,但它对我不起作用
$(document).ready(function() {
$("#display").click(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "o.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").fadeIn('slow').html(response);
//alert(response);
}
});
});
});
这样可以降低输出速度。
$(document).ready(function() {
$("#display").click(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "o.php",
dataType: "html", //expect html to be returned
success: function(response){
setTimeout(function({
$("#responsecontainer").fadeIn('slow').html(response)
},100);
}
});
});
});
我想你可以这样尝试。。
$(document).ready(function() {
$("#display").click(function() {
// add loaders here
$(".class").html('<img src="loader.gif" style="align:center;">');
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "o.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").fadeIn('slow').html(response);
//alert(response);
}
});
// make class empty
$(".class").html('');
});
});
使用delay()
和queue()
方法。你甚至可以把它写在一行里。
delay()
方法设置计时器以延迟队列中下一个项目的执行。
queue()
方法显示了要在匹配元素上执行的函数的队列。
$('#responsecontainer').html('<img src="loading.gif">').delay(2000).queue(function() { $(this).load('o.php'); });