----javaScript部分
<script>
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';
}
</script>
------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
}
-------jsp部分
<body
onload="remove_loading();" bgcolor="black">
<div id="loader_container">
<div id="loader">
<div align="center">
数据正在加载中 ...稍候
</div>
<div id="loader_bg">
<div id="progress">
</div>
</div>
</div>
</div>
<iframe id="framePage" name="framePage" src="xx.do" height="100%" width="100%" scrolling="auto" frameborder="1" border="1">
</body>
分享到：
相关推荐
"异步数据加载时，所用的等待组件，JS源码，类似于UI Block"这个标题揭示了一个关键的组件，它在数据加载期间用于阻止用户界面（UI）的交互，确保数据完整加载后再恢复正常操作。这种组件通常被称为“加载指示器”或...
JavaScript加载等待效果是一种常见的用户体验优化技术，特别是在网页内容动态加载或者需要进行大量计算时。它通过展示一个加载动画或进度条来告知用户页面正在处理数据，以减少用户的等待焦虑感，提升整体的交互体验...
总结来说，"加载数据等待代码包括图片"这个主题涵盖的是网页开发中的用户体验设计，尤其是如何使用JavaScript和CSS来创建加载指示器，确保在数据和图片加载期间提供明确的反馈，并在加载完成后平滑过渡到主要内容。
在JavaScript开发中，"加载等待效果"是一种常见的用户体验优化手段，它通常用于在处理大量数据或执行异步操作时向用户展示进度，以减少用户的等待焦虑。本案例中，我们探讨的是一个相对完善的JS实现的加载等待效果。...
JavaScript加载等待效果是一种常见用户体验优化技术，用于在数据加载期间向用户展示反馈，告知他们系统正在处理请求。这种效果通常会在用户点击按钮或链接后显示，直到后台数据完全加载完毕。下面将详细介绍实现这一...
当用户发起请求时，为了提供一个良好的交互体验，通常会使用“数据加载等待图片及蒙版”这样的设计来告知用户系统正在进行后台处理。这个设计主要由两个核心部分组成：等待图片和蒙版。 等待图片（也称为加载动画或...
以上就是实现"js加载等待效果"的一些基本方法和技巧，通过这些技术，开发者可以创建出丰富的用户体验，让网站在处理数据时更加友好和专业。在实际项目中，还可以根据需求进行定制，比如添加自定义的动画效果，或者...
- **数据预加载**：在用户接近底部之前就加载一部分数据，以减少等待时间。 - **延迟计算**：对于复杂的计算，如排序和过滤，可延后执行，直到用户停止滚动后再进行。 - **优化网络请求**：利用HTTP缓存、压缩和合适...
在网页开发中，"js等待提示"是一种用户体验优化技术，主要目的是在页面处理大量数据或者进行异步操作时，向用户展示一个加载或等待的提示，以告知用户系统正在运行中，避免用户误认为页面卡死。这个过程通常涉及到...
总结，jQuery BlockUI.js是一个强大的工具，能够帮助开发者创建出优雅的页面加载等待效果，提升用户在数据加载过程中的体验。熟练掌握它的使用，将有助于优化网页的交互设计，使用户的每一次点击都得到及时且友好的...
本资源提供了一种实用的js（JavaScript）与css（Cascading Style Sheets）结合实现的加载动画，旨在提升用户体验，减少用户等待时的不耐烦感。下面将详细介绍如何利用JavaScript和CSS来创建一个美观且实用的加载效果...
"页面加载等待遮罩JS.rar"这个压缩包提供了一个纯JavaScript实现的解决方案，它可以帮助我们快速地为网页添加这种功能。 首先，"遮罩层"是一种常见的前端设计技术，它的主要作用是在页面上覆盖一层半透明或全黑的...
对于JavaScript加载后的网页抓取，一种常见的解决方案是使用Headless浏览器，比如Google的Chrome提供了Headless模式，它可以在没有界面的情况下运行，执行JavaScript并返回渲染后的页面内容。另一种方法是使用像...
而加载等待插件是jQuery的一个扩展，它在页面进行异步操作（如Ajax请求）或处理大型数据时，展示一个动态的加载图标或转圈效果，提高用户体验。 这个插件的实现原理通常是通过jQuery的事件监听和DOM操作来控制加载...
10. **资源优化**：对图片进行压缩（如使用WebP格式）、合并CSS和JS文件、删除不必要的代码和资源，都是优化加载速度的有效方法。 以上知识点可以帮助开发者提高H5应用的加载速度和用户体验。通过学习和实践这些...
在创建加载等待功能时，我们通常会利用JavaScript和CSS来实现动画效果，同时在后端JSP中处理数据和逻辑。 1. **HTML结构**：首先，我们需要创建一个基本的HTML结构，包含一个显示加载动画的元素。这可以是一个简单...
这样可以避免一次性加载大量数据，减少内存占用，并提高用户体验，因为用户可以实时看到进度，而不是等待整个文件加载完成。 在实现这个功能时，我们可以利用HTML5的File API，它允许我们在浏览器中直接操作文件。...
本文将详细讨论如何使用JavaScript（JS）来实现这一功能，特别是通过动态加载数据来更新下拉列表。我们将重点关注以下几个方面：省市县联动、数据结构、事件处理以及实际的代码实现。 首先，我们要理解省市县联动的...
2. **JavaScript库**：有许多开源的JavaScript库专门用于创建各种复杂的加载效果，比如`NProgress.js`、`pace.js`等。这些库提供了易于使用的API，只需要几行代码就能在页面加载时自动显示等待效果。 3. **事件监听...
在IT开发过程中，用户体验是至关重要的，特别是在进行网络请求或者数据加载时，为了提供良好的交互体验，开发者常常会使用加载等待框（ProgressDialog）。这个“自定义加载等待框（已封装）”项目，由CoderStar发布...