原生javascript图片懒加载效果代码。

#麻辣小龙虾#

已于 2023-04-18 10:15:52 修改

阅读量1.4k

点赞数 1

分类专栏： web前端 javascript 文章标签： javascript

于 2017-03-21 10:20:59 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/64438738

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

原理是先获取页面所需懒加载的所有图片对象，然后分别计算图片距离顶部的距离是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置，如果小于，那么将自定义的data-src属性中的值（即图片的URL地址赋值给src属性，完成请求加载）。监听页面滚动事件即可！定义n 值存储起来可以更好的记录到滚动可见的图片，避免重复循环，提高性能。

<!doctype html>

<html>

<head>

	<title>index</title>

	<meta charset="utf-8">

	<meta name="renderer" content="webkit">

	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

	<meta name="keywords" content="{$web['web_key']}">	<!--关键词-->

	<meta name="description" content="{$web['web_description']}">	<!--网站描述-->


</head>

<body>

	<div style="width:100%;overflow:hidden;"> <!--容器标签开始-->

	<!--header start-->

		<include file="common/header"/>

	<!--header end-->

	

	

	<!--mainBox start-->

	<div class="main">

		<div class="article-list">

			<div class="container title">

				<h5>注册香港公司相关资料</h5>

				<!-- <a href="" class="more">查看全部 >></a> -->

			</div>

			<div class="container list">

				<foreach name="art" item="value">

					<dl>

						<dt>

							<img src="" alt="" title="{$value['art_title']}" data-src="">

						</dt>

						<dd class="title">

							<a href=""><strong></strong></a>

						</dd>

						<dd class="detail">

							{$value['art_intro']}

						</dd>
						<dd class="detail">{$value['art_addtime']|date="Y-m-d H:i:s",###}</dd>
						<dd class="consolution">

							<!-- <a href="" target="_blank">立即咨询>></a> -->
							<a href="" title="" target="_blank">了解更多>></a>
						</dd>

					</dl>

				</foreach>

			</div>

		</div>





		<!--footer start-->

			<include file="common/footer"/>

		<!--footer end-->

	</div>

	<!--mainBox end-->



	</div><!--容器标签结束-->

</body>
<script>
!function(){
	//获取元素距离页面顶部的绝对距离
	function getAbsPoint(e)
	{
		var x = e.offsetLeft;
		var y = e.offsetTop;
		while(e = e.offsetParent)	
		//等同于while(e.offsetParent){e = e.offsetParent}
		{
			x += e.offsetLeft;
			y += e.offsetTop;
		}
		return {'x': x, 'y': y};
	};
	
    var imgs = document.getElementsByTagName("img");
    var num = imgs.length;
    var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
    window.onscroll = lazyload;
    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
			//判断图片距离页面顶部的位置是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置
            if (getAbsPoint(imgs[i]).y < seeHeight + scrollTop) {
				
                if (imgs[i].getAttribute("src") == "") {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
}();
</script>
</html>

#麻辣小龙虾#

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生javascript图片懒加载效果代码。

原理是先获取页面所需懒加载的所有图片对象，然后分别计算图片距离顶部的距离是否小于屏幕可见高度+页面滚动高度，即元素是否从下滚动到眼球可见位置，如果小于，那么将自定义的data-src属性中的值（即图片的URL地址赋值给src属性，完成请求加载）。监听页面滚动事件即可！定义n 值存储起来可以更好的记录到滚动可见的图片，避免重复循环，提高性能。
复制链接

扫一扫