您的位置：首页 > Web前端 > JavaScript

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

2017-03-21 10:20 555 查看

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

b7f4
<!-- <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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航