首先引入任意版本的jquery文件

准备一张好看的gif图当作加载页面
css样式

.loader-wrapper {height: 100vh;width: 100vw;display: flex;background-color: #ffffff;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;position: fixed;z-index: 9;top: 0; }

html5

<div class="loader-wrapper" id="loader-wrapper"><img src="data:images/loading.gif" width="200" height="" alt="loading" /></div>

js文件

(function($){"use strict";/*========== Loader start ================*/
$(window).on('load', function() {$('#loader-wrapper').fadeIn();setTimeout(function() {$('#loader-wrapper').fadeOut();}, 500);
});
})(jQuery);

ok 这样就好了

万能页面加载loading相关推荐

js 写html加载中的效果,基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下效果图: 正在载入正在载入首页,请稍候. var line = "||" var ...
微信浏览器跳转页面加载loading效果问题
2019独角兽企业重金招聘Python工程师标准>>> 开发一个微网页的项目,先需要跳转银联前加载进度条效果,因后台执行查询非常久,需要展现一个loading效果以下是最开始写的版 ...
html5 载入网页显示,页面加载完之前显示Loading
1.第一种方式 HTML loading... CSS .loader { position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2e ...
网页Loading，让页面加载完再显示
原文链接:http://www.iew3c.com/code-sharing/6672.html 一个真正的网页LOADING,不是装模作样的,网页真正加载完才显示,若没加载完则一直显示进度条,你可以 ...
python能做页面加载动画吗_HTML+CSS实现页面加载（loading）动画效果
大家在浏览页面时有没有遇到页面正在loading(加载)的情况,那作为一个前端开发人员,你知道如何用CSS3和HTML制作页面加载动画效果吗?这篇文章就和大家分享一个超级简单实用的CSS3 圆圈加载( ...
js在html之前加载,js加载前显示loading（页面加载前）
工作中遇到,需要加loading.1.用jquery的load方法读取页面,页面读取完成前显示loading.2.首页js等加载过慢,页面加载完成前显示loading. (1).jquery .loa ...
jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...

万能页面加载loading

首先引入任意版本的jquery文件

ok 这样就好了

万能页面加载loading相关推荐

最新文章

热门文章