原理：
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我自己用data-src）属性指向真实的图片。
src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
</head>
<style>
img{
width: 100%;
height: 300px;
}
</style>
<body>
<div id="lazyLoad">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg" data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1569565431,1808959505&fm=11&gp=0.jpg" alt="">
</div>
</body>
<script>
window.onload = function(){
function lazyLoad(){
var lazyLoadContainer = document.getElementById(‘lazyLoad‘);
var imgLen = lazyLoadContainer.getElementsByTagName(‘img‘).length;//如果图片长度不是固定，而是分页请求的话，则放在return函数中
var imgList = lazyLoadContainer.getElementsByTagName(‘img‘);
var screenW = document.documentElement.clientWidth;
var count = 0;//统计懒加载多少图片
return function(){
console.log(count);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//兼容不同浏览器
for(var i = count; i<imgLen; i++){
//console.log(‘offsetTop‘, imgList[i].offsetTop);
//console.log(‘scrollHeight‘, scrollTop + screenW);
if(imgList[i].offsetTop < scrollTop + screenW-300){
if(imgList[i].getAttribute(‘src‘) === ‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465559144,776586395&fm=27&gp=0.jpg‘){
imgList[i].src = imgList[i].getAttribute(‘data-src‘);
count += 1;
}
}
}
}
}
var useLazyLoad = lazyLoad();
useLazyLoad();
//函数节流
function throttle(action, delay, time){
var timer, startTime = new Date();
return function(){
var context = this, arg = arguments, curTime = new Date();
if(timer){
clearTimeout(timer);
}
if(curTime - startTime > time){
action.apply(context,arg);
startTime = curTime;
}else{
timer = setTimeout(function(){
action.apply(context,arg);
},delay)
}
}
}
window.addEventListener(‘scroll‘, throttle(useLazyLoad,500,100))
}
</script>
</html>
函数节流和函数去抖
以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。
- window对象的resize、scroll事件
- 拖拽时的mousemove事件
- 射击游戏中的mousedown、keydown事件
- 文字输入、自动完成的keyup事件
当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。这种比较适合window的resize事件（函数去抖）；实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理（函数节流）
function debounce(action,delay){//函数去抖
var timer = null;
return function(){
//console.log(‘timer‘,timer)
if(timer){
clearTimeout(timer);
}
var context = this; arg = arguments;
timer = setTimeout(function(){
action.apply(context,arg)
},delay);
}
}
function throttle(action, delay, time){//函数节流
var timer = null, startTime = new Date();
return function(){
if(timer){
clearTimeout(timer);
}
var curTime = new Date();
var context = this, arg = arguments;
if(curTime - startTime > time){
action.apply(context,arg);
startTime = curTime;
}else{
timer = setTimeout(function(){
action.apply(context,arg)//如果直接传arguments，到时打印出来的是undefined
},delay)
}
}
}
var scrollFunc = debounce(function(a){
console.log(a);
},500);
var scrollThrottle = throttle(function(a){
console.log(a)
},5000, 1000)
window.onscroll = function(){
//scrollFunc(22);
scrollThrottle(88)
}
原文地址：https://www.cnblogs.com/luguiqing/p/8685219.html
时间： 2024-10-09 07:04:52