<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/js/jquery-1.3.1.js"></script>
<title>企业培训，it培训，数据库培训，android培训，嵌入式培训</title>
</head>
<script type="text/javascript">
function insertcode(){
var $body = $("body");
$body.append('<div style=\" height:1000px;
font-size:24px;\"><a href=\"http://www.miiceic.org.cn/\"
target=\"_blank\">企业培训</a><br /><a
href=\"http://www.amboedu.com/\"
target=\"_blank\">职业教育</a><br /><a
href=\"http://www.ciitn.com/\"
target=\"_blank\">信息产业培训网</a><br /><a
href=\"http://www.miiceic.org.cn/amt2011/\" target=\"_blank\">android
PK Iphone</a><br /></div>')
$("#page_tag_load").hide();
}
function endcode(){
$("#page_tag_load").hide();
}
$(document).ready(function(){
$(window).scroll(function () {
var $body = $("body");
var $html = "";
$html += "<br/>" + ($(window).height() + $(window).scrollTop());
$html += "<br/>window.height: " + $(window).height();
$html += "<br/>body.height: " + $body.height();
$html += "<br/>window.scrollTop: " + $(window).scrollTop();
$("#page_tag_bottom").html($html);
/*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
$("#page_tag_load").show();
//setTimeout(insertcode, 1000);/*IE 不支持*/
if(($(window).height() + $(window).scrollTop())<3000){
insertcode();
}
else{
endcode();
}
}
});
});
</script>
</head>
<body>
<div style="height:1000px; font-size:24px;"><a
href="http://www.miiceic.org.cn/"
target="_blank">企业培训</a><br /><a
href="http://www.amboedu.com/" target="_blank">职业教育</a><br
/><a href="http://www.ciitn.com/"
target="_blank">信息产业培训网</a><br /><a
href="http://www.miiceic.org.cn/amt2011/" target="_blank">Android PK
Iphone</a><br /><br /><br /><a
href="http://www.miiceic.org.cn/amt2011/"
target="_blank">跨领域技术体验峰会</a></div>
<div id="page_tag_bottom" style="width:100%; position:fixed;
_position:absolute;top:0px;
background-color:#cccccc;height:120px;"></div>
<div id="page_tag_load" style=" display:none;
font-size:14px;position:fixed; bottom:0px;
background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>
分享到：
相关推荐
这种技术允许用户在滚动页面时，内容（如图片）会随着滚动条的移动而逐步加载，而不是一次性全部加载到浏览器中。这样做的主要目的是优化用户体验，尤其是当页面包含大量内容时，可以避免一次性加载所有资源导致的...
在ExtJS 4.0版本中，它提供了一系列功能，包括表格面板（Grid Panel）的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中，表格面板允许用户动态隐藏或显示列，以...
总结，"无刷新联级，滚动条滚动加载数据"是现代Web开发中的重要技术，它通过JavaScript和Ajax优化了用户体验，使得用户能够在不刷新页面的情况下浏览大量信息。同时，通过监听鼠标滚轮事件，实现滚动加载，使数据...
上拉滚动条异步加载组件，也称为无限滚动或滚动加载，是现代Web应用和移动应用中常见的一种设计模式。这种技术允许用户在滚动到页面底部时动态加载更多内容，而不是一次性加载所有数据，从而提高了页面性能并减少了...
JavaScript图片随滚动条异步加载是一种优化网页性能的常见技术，尤其在处理大量图片或大容量内容时。这种技术能够显著提升网页加载速度，改善用户体验，因为它只在用户实际需要时才加载图片，而不是一次性加载整个...
3. **动态加载内容**：到达底部后，我们通常会向服务器发送一个请求，获取更多的数据。这可以通过`fetch` API或者传统的`XMLHttpRequest`实现。发送请求时，可能需要携带当前加载到的数据的最后一个ID，以便服务器...
在实现滚动加载中，JQuery的`$(window).scroll()`事件监听用户的滚动行为，`$(document).height()`获取文档总高度，`$(window).height()`获取窗口可视区域高度，以及`$(window).scrollTop()`获取滚动条距离顶部的...
网页图片随滚动条加载是一种优化网页性能的技术，它主要针对含有大量图片的页面，通过只在用户滚动到可视区域时加载图片，来提高网页的加载速度和用户体验。这种技术也被称为懒加载（Lazy Loading）或者延迟加载（On...
在前端开发中，实现滚动条监听以及当滚动条滑动到页面底部时动态加载内容是一项常见的需求。这不仅提高了用户体验，还可以有效减少服务器的负担，因为它允许用户仅在需要时加载数据。本文将详细解释如何使用原生...
滚动条滚动延迟加载图片是一种常见的优化网页性能的技术，也被称为懒加载（Lazy Loading）。这种技术主要应用于图片密集型的网站，如社交媒体、博客或者电子商务平台，目的是减少页面初始加载时间，提升用户体验，...
4. **更新页面内容**：JavaScript接收到响应后，解析数据，将新内容插入到页面的适当位置，通常是滚动条下方。 5. **优化用户体验**：为了防止连续触发滚动事件，可以设置一个短暂的延迟（如使用`debounce`函数）...
在IT行业中，我们经常需要处理各种用户界面和用户体验问题，其中滚动条的样式和字体的加载是两个重要的方面。这个“下拉滚动条字体加载类”项目，正如其标题所示，是一个结合了自定义滚动条效果和外部字体加载功能的...
3. **判断是否滚动到底部**：通过比较滚动条的当前位置与文档总高度的关系来判断是否到达底部。例如，`$(window).scrollTop() + $(window).height() >= $(document).height()`，如果满足这个条件，则表示用户已经...
当用户滚动页面时，内容会随着滚动条的下移逐渐加载，这种技术也被称为无限滚动或懒加载，它可以提升用户体验，减少页面初次加载时的数据量。 **jQuery的滚动事件与无限滚动** jQuery提供了`$(window).scroll()`...
综上所述，结合ASP.NET、jQuery和AJAX，我们可以创建一个动态的下拉列表控件，当用户滚动滚动条时，数据会自动按需加载。这提高了用户界面的响应性，提升了用户体验。在实现过程中，注意合理设计数据加载机制，以...
它可能包含了各种示例，展示了如何根据内容的增减或窗口尺寸的变化动态调整滚动条的取值范围。这可能涉及到以下几种情况： 1. **内容变化**：当界面中的数据显示增加或减少时，滚动条的范围应随之更新。例如，加载...
JavaScript滚动延时加载，也称为懒加载（Lazy Loading），是一种优化网页性能的技术。它主要应用于大量数据或图像的页面，通过只在用户滚动到可视区域时才加载相关内容，从而减少初次加载页面时的数据量，提高页面...
动态滚动条加载效果，也称为“无限滚动”或“滚动监听”，当用户滚动到页面底部时，会自动加载更多的内容，常见于新闻网站和社交媒体平台。这个效果主要通过jQuery的`$(window).scroll()`事件监听滚动条位置，并结合...
描述中的“滚动窗口加载”就是指的这个过程，当用户滚动到一定位置，相关的程序（如脚本或图片）才开始执行或加载。这种方式降低了对用户设备资源的需求，尤其是在移动设备上，能有效节省流量和电池寿命。 标签中的...
一旦数据加载完成，滚动条将填满，倒计时停止，用户可以开始浏览内容。 为了优化用户体验，设计师和开发者还需要考虑其他因素，如滚动条的动画效果、加载速度与用户体验的关系、加载失败时的错误提示等。此外，考虑...