以下是一个使用AJAX的示例代码,其中在第一次请求时不显示图像,但在连续的请求中显示图像。
HTML代码:
AJAX示例
JavaScript代码(script.js):
$(document).ready(function() {
var isFirstRequest = true;
$('#loadButton').click(function() {
$.ajax({
url: 'image.jpg', // 图像的URL
beforeSend: function() {
if (isFirstRequest) {
isFirstRequest = false;
} else {
$('#image').show(); // 显示图像
}
},
success: function() {
$('#image').attr('src', 'image.jpg'); // 设置图像的src属性
},
error: function() {
console.log('请求失败');
}
});
});
});
在上述示例中,首先通过CSS将图像的显示设置为display: none;
,以隐藏图像。然后,通过JavaScript代码在每次请求之前检查isFirstRequest
变量的值。在第一次请求时,将isFirstRequest
设置为false
,这样在beforeSend
回调函数中可以跳过显示图像的代码。而在连续的请求中,isFirstRequest
的值为false
,因此在beforeSend
回调函数中可以显示图像。
这样,每次点击“加载图像”按钮时,第一次请求将不会显示图像,但在连续的请求中将显示图像。