原理是先获取页面所需懒加载的所有图片对象,然后分别计算图片距离顶部的距离是否小于屏幕可见高度+页面滚动高度,即元素是否从下滚动到眼球可见位置,如果小于,那么将自定义的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>