JS读取本地文件夹和图片异步加载（图片LazyLoad）

最新推荐文章于 2023-07-28 09:30:14 发布

xdajian

最新推荐文章于 2023-07-28 09:30:14 发布

阅读量1.5k

点赞数 3

分类专栏： Javascript 文章标签： LazyLoad 图片延迟加载 js读取文件夹 js读取图片

本文链接：https://blog.csdn.net/xdajian/article/details/84343070

版权

Javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

/*
说明：当某一个页面拥有非常多的图片或者使用图片列表的时候，图片全部加载即浪费资源，又影响页面加载速度，所以使用图片延迟加载。

图片延迟加载可以实现：当用户拖动滚动条的时候，只有在滚动条可见范围内的图片，
才会显示。


*/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<title>Image LazyLoad</title>
</head>
<body οnlοad="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.οnscrοll= lazyload;
window.resize= lazyload;
       
</script>
</body>

愤怒的coder - 共享

xdajian

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS读取本地文件夹和图片异步加载（图片LazyLoad）

/*说明：当某一个页面拥有非常多的图片或者使用图片列表的时候，图片全部加载即浪费资源，又影响页面加载速度，所以使用图片延迟加载。图片延迟加载可以实现：当用户拖动滚动条的时候，只有在滚动条可见范围内的图片，才会显示。*/ &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" ...
复制链接

扫一扫