原生js如何实现懒加载？
栏目: JavaScript · 发布时间: 6年前
内容简介：前言：关于懒加载这个问题呢，是我大三暑假接到的一个电话面试问到的问题，当时我回答了大致的思路，但是极其含糊，离真正的实现还是有差距的，如今过了快一年了，现在我就来实现一下吧~原理:原理很简单，我们不用想的很复杂。就是让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加载失败的程序集重新加载
- 虚拟机类加载机制：类加载时机
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Code Reading
Diomidis Spinellis / Addison-Wesley Professional / 2003-06-06 / USD 64.99
This book is a unique and essential reference that focuses upon the reading and comprehension of existing software code. While code reading is an important task faced by the vast majority of students,......一起来看看 《Code Reading》 这本书的介绍吧!
