/*
说明：当某一个页面拥有非常多的图片或者使用图片列表的时候，图片全部加载即浪费资源，又影响页面加载速度，所以使用图片延迟加载。
图片延迟加载可以实现：当用户拖动滚动条的时候，只有在滚动条可见范围内的图片，
才会显示。
*/
<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 - 共享
分享到：
相关推荐
**懒加载（Lazy Load）异步加载图片技术详解** 懒加载是一种优化网页性能的技术，它主要应用于图片或者视频等大体积资源的加载。在网页初次加载时，只加载视口内的图片，当用户滚动页面，即将进入视口的图片才会被...
图片异步延迟加载，也称为懒加载（Lazy Loading），是一...综上所述，`lazyload.js`是一个强大的工具，可以帮助我们实现高效的图片异步延迟加载，提高网页性能。通过合理配置和使用，可以为用户提供更流畅的浏览体验。
jQuery LazyLoad 是一个轻量级的JavaScript插件，它允许我们只加载当前可视区域内的图片，其余图片则在用户滚动页面时逐步加载。这种方法显著减少了首次页面加载的时间，提高了用户体验，同时也节省了带宽资源。 ##...
标题中的"js lazyLoad 图片懒加载demo"指的是一个使用JavaScript实现的图片懒加载示例项目。在这个项目中，开发者可能会用到一个名为`lazyload.js`的插件，该插件帮助简化了图片懒加载的实现过程。 描述中提到的...
`lazyload.js` 是一个实现图片延迟加载的JavaScript库，它的特点是轻量级且易于使用，没有多余的代码，使得开发者能够快速地集成到项目中。在本文中，我们将深入探讨`lazyload.js`的工作原理、使用方法以及如何在...
《jQuery LazyLoad 图片预加载技术详解》 在网页设计中，图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时，如果一次性全部加载，可能会导致页面加载时间过长，用户需要等待，这无疑降低了网站的可用...
在网页开发中，图片异步加载通常通过JavaScript库来实现，如jQuery及其插件`jquery.lazyload.js`。这个插件是专门为延迟加载图片设计的，它监听用户的滚动事件，只有当图片进入视口（即用户可以看到的区域）时，才会...
4. **自定义事件和扩展**：jQuery.lazyload 允许开发者自定义加载事件和扩展功能，如在图片加载完成后执行某些操作，或者与其他库和框架集成。 5. **优化提示**：为了确保所有浏览器都能正确工作，建议为低版本...
`index.html`可能包含了实现懒加载的示例代码，`js`文件夹可能包含对应的JavaScript代码，而`images`文件夹可能包含占位符图片和实际的图片资源。`index_2.html`可能是另一种实现方式的示例。通过阅读和研究这些文件...
在JavaScript（JS）中，异步加载图片是一种优化网页性能的技术。它允许浏览器在不影响页面主要功能的情况下，按需或后台加载非关键资源，如图片。这样可以减少页面初次加载的时间，提高用户体验，特别是对于含有大量...
3. **调整配置选项**：JQuery.LazyLoad提供了一些配置参数，如`threshold`和`container`，可以根据实际需求进行调整，以确保图片在正确的位置加载。 4. **兼容性测试**：在多种浏览器和设备上进行测试，确保动态加载...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
**jQuery LazyLoad.js 图片懒加载技术详解及Demo演示** 在网页设计中，图片加载是一项重要的性能优化策略。尤其对于内容丰富的网站，一次性加载所有图片可能会导致页面加载速度变慢，影响用户体验。为了解决这个...
"lazyload.js图片延迟加载（懒加载）插件" 是一个JavaScript库，主要用于优化网页性能，特别是那些包含大量图片的页面。它实现了“懒加载”技术，即图片不会在页面加载时立即加载，而是在用户滚动到图片即将出现在...
**jQuery Lazyload 图片加载技术详解** 在网页设计中，图片是重要的元素之一，但大量图片的预加载可能会拖慢页面的加载速度，影响用户体验。为了解决这一问题，jQuery 提供了一个插件——jQuery Lazyload，它允许...
2. **异步加载**：如果图片是从服务器动态获取，需要考虑异步加载的情况，确保图片加载完成后能被 LazyLoad 正确处理。 3. **SEO**：延迟加载可能会影响搜索引擎的抓取，需确保在 HTML 中保留完整 `src` 属性供爬虫...
通常，我们将 jQuery 放在 `<head>` 标签内，而将 `jquery.lazyload.js` 放在所有图片元素之后，这样可以确保在处理图片之前，jQuery 已经加载完毕： ```html <!DOCTYPE html> 懒加载示例 ...
在网页设计中，为了提高页面加载速度和优化用户体验，一种常见的技术是图片延迟加载，也称为懒加载（Lazy Load）。JavaScript 是实现这一功能的主要工具，它允许我们在用户滚动到图片时才加载图片，而不是一次性加载...
1. **引入 jQuery 和 LazyLoad**：首先确保页面中已经引入了 jQuery 库，然后引入 LazyLoad 的 JavaScript 文件，如 `jquery.lazyload.js`。 2. **设置 HTML 结构**：给需要延时加载的图片添加特定的类名（如 `lazy...