实现网页加载过程进度条

来源：互联网发布：淘宝禁售手机卡编辑：程序博客网时间：2024/05/22 02:26

（慕课网学习记录）

*进度条下载网址：https://preloaders.net/

*首先在网页同目录下建立images文件夹，放入下载好的进度条文件

<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><title>进度条</title><style>.loading{width:100%;height:100%;position:fixed;left:0;top:0;z-index:100;background:#fff}.loading .pic{width:64px;height:64px;background:url(images/4.gif);position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}</style></head><body><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" /><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" /><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" /><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/><img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/><script>$(function(){var loading='<div class="loading"><div class="pic"></div></div>';$("body").append(loading);})document.onreadystatechange=function(){console.log(document.readyState);if(document.readyState=="complete"){$(".loading").fadeOut();}}</script></body></html>

阅读全文

0 0