html页面异步加载时，显示预加载

最新推荐文章于 2025-10-14 13:37:08 发布

原创最新推荐文章于 2025-10-14 13:37:08 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#预加载 #loading

本文介绍了一种在HTML页面中实现异步加载时显示预加载提示的方法。通过使用jQuery库，可以在AJAX请求开始时显示加载动画，在请求结束时隐藏加载提示，提升用户体验。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta name="description" content="">
<meta name="keywords" content="">
<title>html页面异步加载时，显示预加载</title>
</head>

<div id="loading_span" class="loading" style="display: none;"><img src="/images/im/loading.gif"></div>

//异步加载loading
$(document).ajaxStart(function(){
$('#loading_span').show()

}).ajaxStop(function(){
$('#loading_span').hide()

});

</script>

</body>

</html>