原生js如何实现懒加载？
栏目: JavaScript · 发布时间: 5年前
内容简介：前言：关于懒加载这个问题呢，是我大三暑假接到的一个电话面试问到的问题，当时我回答了大致的思路，但是极其含糊，离真正的实现还是有差距的，如今过了快一年了，现在我就来实现一下吧~原理:原理很简单，我们不用想的很复杂。就是让img的src为空，图片的真实地址可以存储在img一个自定义的属性里，就比如date-src吧，等到目标图片出现在视野了，把data-src里的值赋给src。上面提到自定义属性，那么如何获取自定义属性呢？用
前言：关于懒加载这个问题呢，是我大三暑假接到的一个电话面试问到的问题，当时我回答了大致的思路，但是极其含糊，离真正的实现还是有差距的，如今过了快一年了，现在我就来实现一下吧~
原理:原理很简单，我们不用想的很复杂。就是让img的src为空，图片的真实地址可以存储在img一个自定义的属性里，就比如date-src吧，等到目标图片出现在视野了，把data-src里的值赋给src。
实现懒加载必备知识：
上面提到自定义属性，那么如何获取自定义属性呢？用 getAttribute（属性名）
除此之外，我们还需要知道clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的区别以及所代表的含义，说实话，我自己也很模糊，每次使用的时候都需要查一下，相信很多人也跟我一样，那具体的我这里就不细说了，我查看了一些博客，觉得有一篇写的挺好，这里我直接上图（别问我为什么，因为我懒~）
这里我把这篇文章的地址给大家： www.cnblogs.com/libin-1/p/5…
那么下面我将把自己的代码直接展示出来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片懒加载</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
display: block;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<img src="" date-src="../images/1.jpg" date-h="300" alt="">
<img src="" date-src="../images/2.jpg" date-h="300" alt="">
<img src="" date-src="../images/3.jpg" date-h="300" alt="">
<img src="" date-src="../images/4.jpg" date-h="300" alt="">
<img src="" date-src="../images/5.jpg" date-h="300" alt="">
<img src="" date-src="../images/bird.png" alt="">
<script>
var imgs=document.getElementsByTagName("img");
var n=0;//用来记录当前是第几张图片
var seeHeight = document.documentElement.clientHeight;
var h = imgs[0].getAttribute('date-h');
// console.log(h);
var index = Math.floor(seeHeight/h);//一进页面展示的几张图片
for(i=0;i<=index;i++){
imgs[i].src = imgs[i].getAttribute('date-src');
}
window.onscroll = function(){
for (var i = n; i < imgs.length; i++) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (imgs[i].offsetTop < seeHeight + scrollTop) {
if (imgs[i].getAttribute('src') == '') {
imgs[i].src = imgs[i].getAttribute('date-src');
}
n = i + 1;
console.log('n = ' + n);
}
}
}
</script>
</body>
</html>
复制代码
总之：希望大佬们多多指教，给点意见~
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- ios - 原生骨架屏，网络加载过渡动画的封装
- php原生上拉加载，点击加载更多(jQuery,ajax,mysql)
- 原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）
- 介绍同步加载、异步加载、延迟加载[原创]
- .net加载失败的程序集重新加载
- 虚拟机类加载机制：类加载时机
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
