JS文件代码 保存为LOAD.js
<!--
//页面加载中效果开始
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate() {
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}
CSS代码 保存为css.css
/* 页面加载特效 */
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%;
left: 0;
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #5a667b;
text-align:left;
z-index:2;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#8894a8;
}
#loader_bg {
background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px;
}
紧跟<body>中加入
<div id="loader_container">
<div id="loader" style="width: 130px; height: 48px">
<div align="center"><font color="#FF9900">页面正在加载中 <br>
请稍候...</font></div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<head>间加入
<style type="text/css" title="currentStyle" media="screen">
@import "css.css";
</style>
<script language="JavaScript" src="load.js"></script>
</body>前加入
<script language="javascript">
remove_loading();
</script>
分享到：
相关推荐
"页面加载时提示正在加载中"这一功能，正是为了提升用户体验而设计的。当用户点击链接或提交表单时，页面加载的过程可能会消耗一些时间，特别是在处理大量数据或者进行复杂的计算时。这种等待可能会让用户感到不耐烦...
当你遇到“jsp页面加载时提示loading”的问题时，这通常意味着页面正在加载或有延迟加载的情况发生。这个问题可能由多种因素导致，下面我们将详细探讨这些可能的原因及其解决方案。 1. **页面内容过多**：如果JSP...
总结来说，C#中实现Winform打开网页页面的方法主要包括使用`System.Diagnostics.Process.Start()`以及使用`WebBrowser`控件。`WebBrowser`控件不仅能够展示网页，还可以执行JavaScript代码，为开发者提供了更灵活的...
通常，广告服务器会提供一段JavaScript代码，开发者将其插入到网页的HTML中合适的位置，这段代码会在页面加载完成后执行，请求并渲染广告。 2. **广告加载流程** - **请求广告**: 当用户打开页面时，JavaScript...
手机页面预加载效果是移动应用或网页在用户打开时，为了提供流畅的用户体验而采用的一种技术。当用户点击一个链接或者启动应用时，预加载效果会先展示出来，以掩盖内容加载过程中的空白期，同时给予用户视觉反馈，...
- **安全考虑**：考虑到网络安全，使用此功能时要注意防止跨站脚本攻击（XSS）和恶意代码注入，确保加载的网页来自可信源。 2. **网络摄像头集成**： - **视频流接入**：组态王可以接入网络摄像头的实时视频流，...
通过以上步骤，我们可以实现一个jQuery驱动的网页弹窗功能，它在页面加载时自动弹出，并且具有可关闭性。对于不同的项目需求，只需调整HTML内容和jQuery逻辑，就能轻松实现各种弹窗效果。这个功能对于网站的用户体验...
在本篇文章中，我们将深入探讨QtWebView的使用方法、特性以及如何通过Qt来构建一个在线加载网页的应用。 首先，让我们了解QtWebView的基本概念。QtWebView是基于WebKit引擎的，WebKit是一个开源的Web渲染引擎，被...
在网页开发中，有时我们需要实现子页面在父页面中打开的功能，这在多窗口或框架结构的应用中尤其常见。jQuery库作为一个强大的JavaScript工具集，能够简化这种操作，使得无需依赖基础的jQuery类库就能实现这一功能。...
PreLoader: Make your activity launch faster changelog 中文文档 Pre-load data before Activity opens, and display data on UI after UI initialization....You can start a PreLoader everywhere and start to ...
C01-C23 C01文件夹中内容： 1.1 HTML页面反向显示.htm 1.2 页面自动最大化.htm 1.3 页面自动刷新.htm 1.4 页面的后退、刷新、前进.htm ... 1.37 页面打开时的百叶窗效果.htm 1.38 页面源代码的加密.htm
当用户打开一个网页，网站启动加载代码会控制页面如何逐步呈现，包括加载资源、执行JavaScript、渲染DOM元素等过程。理解并优化这部分代码对于提升网页性能至关重要。 首先，我们需要了解HTML、CSS和JavaScript在...
在本文中，我们将深入探讨如何使用JavaScript实现页面加载完毕之前的“loading”提示效果。这个效果可以在页面内容完全加载之前，向用户展示一个“页面加载中，请稍后...”的提示，以提升用户体验，避免用户在等待...
标题与描述：“打开网页很慢,怎样提高速度呢”这一问题直指许多互联网用户在浏览网页时遇到的普遍困扰——网页加载速度缓慢。这不仅影响用户体验，还可能对网站的SEO排名产生负面影响。因此，掌握如何提高网页打开...
为了实现自动全屏，可以在页面加载完成后触发全屏操作，可以利用`window.onload`或`DOMContentLoaded`事件： ```javascript window.onload = function() { fullScreen(); }; ``` 或者使用`DOMContentLoaded`事件...
2. **初始化WebView**：在Activity或Fragment的Java代码中，通过`findViewById()`找到WebView对象，并调用`setWebViewClient()`设置WebView客户端，用于处理页面加载事件。例如： ```java WebView webView = ...
通过覆盖`shouldOverrideUrlLoading`方法，我们可以决定当点击网页链接时是否在当前WebView中打开，或者跳转到外部浏览器。 4. **WebSettings**： WebSettings对象提供了许多用于定制WebView行为的选项。例如，...
页面加载是Web开发中的核心概念，它涉及到用户打开一个网页时浏览器如何获取、解析和显示内容的过程。在本文中，我们将深入探讨这个过程，并结合"源码"和"工具"这两个标签来理解如何优化和分析页面加载性能。 首先...
当用户点击链接或打开新页面时，一个独特且引人入胜的加载效果可以大大提升品牌形象，同时也能在用户心中留下深刻印象。这30个示例可能涵盖了各种风格，包括极简主义、科幻、复古等多种主题，为开发者提供了丰富的...
通过`setWebViewClient()`设置`WebViewClient`，可以监听页面加载状态，如加载开始、加载完成等。 - 使用`loadUrl()`方法加载本地或远程URL。加载本地HTML时，通常将HTML文件放在`assets`或`res/raw`目录下，通过`...