JQuery 实现页面 loading 效果

最新推荐文章于 2022-04-02 12:35:34 发布

原创最新推荐文章于 2022-04-02 12:35:34 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

javascript/jquery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客展示了如何利用JQuery实现页面加载时的loading效果。当页面内容加载完成，通过`$(window).load()`函数，隐藏loading图片和提示文字，达到加载完毕的视觉效果。示例代码包括HTML结构、CSS样式以及JQuery脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面正在加载时页面效果如下图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>loading</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $(window).load(function(){
       $("img").hide("");
       $("p").hide("");
      });
   });

</script>
<style>
*{
   margin:0px;
   padding:0px;
}
body{
   min-height:500px;
}
.loading{
   width:600px;
   height:600px;
   padding:200px 550px;
}
.loading img{
   width:200px;
   height:100px;

}
.loading p{
   color:#39F;
}
</style>
</head>

<body>
<h1 align="center">JQuery 实现页面 Loading 效果</h1>
<div class="loading">
   <img src="loading.gif"/>
   <p>页面正在加载中，请稍后......</p>
</div>

</body>
</html>