页面请求完成显示（页面未加载完成时等待的效果）

最新推荐文章于 2024-09-24 13:53:35 发布

邓波home

最新推荐文章于 2024-09-24 13:53:35 发布

阅读量8.1k

点赞数

分类专栏：延迟加载

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.csdn.net/dengboblog/article/details/53467058

版权

延迟加载专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了一个简单的页面加载动画实现方案，使用了HTML、CSS及jQuery技术。通过将加载动画设置为页面加载时显示的一个覆盖层，提高了用户体验。该方案利用jQuery的fadeIn和fadeOut方法来控制动画的显示与隐藏。

摘要由CSDN通过智能技术生成

<html>
<head>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://img-blog.csdn.net/20161205162919763') 50% 50% no-repeat rgb(249,249,249);
}
</style>    
</head>
<body οnlοad="load()">
<div id="loading" class="loader" >
</div>
<!--你的内容-->
</body>
<script type="text/javascript">
function load(){
	$("#loading").fadeOut("slow");
}
</script>
</html>

预览地址：http://codepen.io/dddddd1/pen/qqodgL

参考：http://vr013.com/