/*
说明：当某一个页面拥有非常多的图片或者使用图片列表的时候，图片全部加载即浪费资源，又影响页面加载速度，所以使用图片延迟加载。
图片延迟加载可以实现：当用户拖动滚动条的时候，只有在滚动条可见范围内的图片，
才会显示。
*/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>Image LazyLoad</title>
</head>
<body onload="searchFiles();lazyload();">
<div id="div_con" style="text-align:center;"></div>
<script type="text/javascript">
function searchFiles(){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var href = (window.location.href+"").replace("file:///","");//获取当前html文件的物理路径。
var arr = href.split("/");
var len = arr.length;
arr.pop();//pop掉html文件名称，得到当前html文件所在的物理路径。
var path = arr.join("\\\\")+"\\images";//获取当前html所需要的图片的物理路径。
var f = fso.GetFolder(path);
var fc = new Enumerator(f.files);
var arr = [];//用于存储所有的图片信息，最终输出到DIV中。
var width = (document.documentElement.offsetWidth-50)+"px";//页面最大宽度
var sTemp = "";//临时变量，用于存储图片名称
for (; !fc.atEnd(); fc.moveNext())
{
sTemp = (fc.item()+"").toLowerCase();
var isImg = (sTemp.indexOf(".jpg")>0 ||sTemp.indexOf(".png")>0||sTemp.indexOf(".bmp")>0||sTemp.indexOf(".gif")>0);
if(isImg){
sTemp = (fc.item()+"").split("\\")[len];
arr.push( '<img alt="image" title="');
arr.push(sTemp);
////默认显示图片的alt，使用file缓存图片的链接地址，用于动态赋值给图片的src
arr.push('" style="float:middle;border:10px inset #cccccc;max-width:'+width+';margin-top:20px;" file="images/');
arr.push(sTemp);
arr.push('" /><br/>');
}
}
document.getElementById("div_con").innerHTML = arr.join("");
}
function lazyload(){
var arr = document.getElementsByTagName("IMG"); //当前页面的所有图片
var nOffsetHeight = document.documentElement.offsetHeight;
var img;//临时变量
for(var i=0,len=arr.length;i<len;i++){
img = arr[i];
if(!!img.getAttribute("src")==true){continue;}
//如果图片的带滚动条的上边距 < 页面高度 + 页面Y轴滚动条的距离，也就是【图片在滚动条的可见范围内】
if(img.offsetTop < nOffsetHeight+document.documentElement.scrollTop){
img.setAttribute("src",img.getAttribute("file"));//给图片的src赋值，加载并显示图片。
}
}
}
//注册事件监听
window.onscroll= lazyload;
window.resize= lazyload;
</script>
</body>
愤怒的coder - 共享
分享到：
相关推荐
基于Qt开发的截图工具.zip 截图工具（QScreenShot） Qt编写的一款截图工具。 特点 - 支持全屏截图 - 支持自定义截图 - 支持捕获窗口截图 - 支持固定大小窗口截图 - 颜色拾取 - 图片编辑 - 图片上传到wordpress 环境 Qt6.2 QtCreate 8
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
基于ASP.NET技术的班级展示网站构建资源，是一套针对教育机构或学生团体，旨在通过ASP.NET框架开发班级风采展示平台的指导资料或教程。此资源详细介绍了如何利用ASP.NET的强大功能，快速搭建一个功能完善、界面友好的在线班级展示平台。 该资源涵盖了从需求分析、数据库设计、前端页面制作到后端逻辑实现的全过程。通过实例演示，指导用户如何设置班级信息、学生风采展示、活动公告、图片上传与浏览等核心功能模块。同时，结合ASP.NET的MVC架构，实现了前后端分离，提高了代码的可维护性和可扩展性。 此外，该资源还提供了丰富的代码示例和注释，帮助开发者深入理解ASP.NET框架的工作原理，掌握如何运用其强大的数据库操作、用户认证与授权等特性。对于初学者来说，这是一份难得的入门教程；而对于有一定经验的开发者，则是一份提升技能的参考资料。 总之，基于ASP.NET技术的班级展示网站构建资源，是教育机构和学生团体实现班级风采在线展示的理想选择，也是开发者学习ASP.NET框架应用的宝贵资源。
基于springboot的流浪动物管理系统源码数据库文档.zip
基于springboot+vue的实践性教学系统源码数据库文档.zip
基于Python+Django家居全屋定制系统源码数据库文档.zip
Umi-OCR-main.zip
基于springboot复兴村医疗管理系统源码数据库文档.zip
基于springboot二手物品交易系统源码数据库文档.zip
2024年西安外事学院数学建模校赛题目.zip
基于springboot医疗废物管理系统源码数据库文档.zip
GEE训练教程
内容概要：本文详细介绍了Spring Boot的设计和应用，涵盖了从基本概念到高级用法的全方位教学。首先通过环境搭建、首个项目创建、核心概念解析等步骤帮助读者快速上手。接着阐述了Spring Boot的设计原则与最佳实践，强调代码整洁和系统可维护性。最后，提供了两个实战案例：构建简单的RESTful API和电商网站后台管理系统，涉及项目结构、依赖配置、数据库设计、实体类与控制器的创建等内容，指导读者进行真实项目的开发。 适合人群：适合初学者到中级开发者的Java开发人员，尤其是对企业级应用开发感兴趣的人士。 使用场景及目标：①帮助开发者全面掌握Spring Boot的基本用法及其设计理念；②提供实用的实战案例和资源，使读者能够在实际项目中熟练应用Spring Boot技术。 阅读建议：跟随文章提供的步骤逐步操作，并结合实际开发需求灵活运用所学知识。建议多动手练习，加强对Spring Boot的理解和掌握。
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过严格测试运行成功才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
内容概要：本文详细介绍了一个课程考试系统的设计与开发过程，涵盖语言教程、实战案例和项目资源。主要内容包括：选择Java作为开发语言，详细讲解Java基础语法和Web开发基础；实战案例包括用户管理、课程管理和考试管理模块的实现；提供了项目结构、数据库设计和依赖管理的详细示例。 适合人群：适用于初学者和有一定经验的开发者，希望通过实际项目掌握课程考试系统的设计与开发。 使用场景及目标：帮助学习者全面提升从理论到实践的能力，最终能够独立完成一个完整的课程考试系统。无论是学习编程基础还是进阶实战，本文都提供了全面的指导。 其他说明：项目涉及多个关键技术和知识点，如Servlet、JSP、JDBC、MVC模式等，有助于深入理解和应用这些技术。此外，还包括项目部署和运行的具体步骤，方便学习者快速搭建和测试系统。
《伯牙鼓琴》教学课件.pptx
基于springboot面向社区的智能化健康管理系统研究源码数据库文档.zip
基于springboot+javaweb宿舍管理系统源码数据库文档.zip
基于SpringBoot的遥感影像共享系统源码数据库文档.zip