Html未加载完成时实现动态加载效果

在html页面未加载完成时会有一段空白，增强用户体验的话，必须在未加载完成时实现动态效果

效果如下:

1、一个普通html页面，内容如下

<html>
<head>
<style>
.loader {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="loading" class="loader">
</div>
</body>
</html>

这样倒是有动态效果啦，可是它就一直显示着啦

2、当内容加载完成取消动态效果

<html>
<head>
<script src="jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript">
     $(window).load(function() {
   $("#loading").fadeOut("slow");
})
</script>
<style>
.loader {
   position: fixed;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 9999;
   background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="loading" class="loader">
</div>

</body>
</html>

这样就实现了动态加载效果，但是当加载内容过多的时候该方法就没有过多的意义啦

源码下载:html动态加载效果源码

Html未加载完成时实现动态加载效果相关推荐

.ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).ready(function () { $(" ...
java spring包_java 自定义加载器，加载spring包，动态加载实现，jar包隔离，tomcat加载webapp方式...
java 自定义加载器,加载spring包,动态加载实现,jar包隔离,tomcat加载webapp方式发布时间:2018-08-20 12:02, 浏览次数:774 , 标签: java spri ...
ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
jQuery Ajax 加载数据时异步显示加载动画 ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).re ...
页面加载完时再动态添加脚步
//页面加载时不存在,加载完时再添加 function loadScript(url) {//外部文件var script = document.createElement("script& ...
ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析这里面牵扯到两 ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...
extjs6.0 动态加载_Extjs入门之动态加载树代码
Extjs动态加载树的实现代码,需要的朋友可以参考下. Extjs动态加载树,首先在数据库里面设计存放树信息的表 USE [KimiExtjs] GO /****** 对象: Table [dbo]. ...
ASM:《X86汇编语言-从实模式到保护模式》第13章：保护模式下内核的加载，程序的动态加载和执行...
★PART1:32位保护模式下内核简易模型 1. 内核的结构,功能和加载每个内核的主引导程序都会有所不同,因为内核都会有不同的结构.有时候主引导程序的一些段和内核段是可以共用的(事实上加载完内核以后 ...
Android动态加载技术
基本信息 Author:kaedea GitHub:android-dynamical-loading 我们很早开始就在Android项目中采用了动态加载技术,主要目的是为了达到让用户不用重新安装AP ...

Html未加载完成时实现动态加载效果

在html页面未加载完成时会有一段空白，增强用户体验的话，必须在未加载完成时实现动态效果

Html未加载完成时实现动态加载效果相关推荐

最新文章

热门文章