原理
页面显示图片是由于浏览器是否发起请求,请求图片的src属性,因此将一个小的加载图片放到页面当中,当图片进入到可视区域,再给src赋值,未进入前不给src赋值,这样浏览器将不会发起请求
思路
- 加载loading图片(为了避免重复执行赋值操作,因为图片加载过将不会再加载,可以对图片设置一个类名,当加载过了,让类名为空)
- 判断哪些图片需要加载
- 隐形加载图片
- 替换真图片(如今见到的显示图片都是慢慢显现出来的,因此可以加一个过渡效果)
实现
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
opacity: 0;
transition: all 1s linear;
}
.current {
opacity: 1;
}
</style>
</head>
<body>
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
<img src="./icon/O1CN01sdQRAo1abQiWtZpKz_!!6000000003348-0-octopus.jpg"
data-src="./icon/O1CN01kotcXe29YEVObhi37_!!6000000008079-0-octopus.jpg" class="lazyloading">
js代码
window.onload=function(){
//获取图片列表俩种加载图片1、如下代码 2、var imgs=document.querySelectorAll('.lazyloading')此处要不断获取应当放置于lazyload函数中
//var imgs=document.querySelectorAll("img")
//获取图片距顶部的距离
function getTop(e){
return e.offsetTop
}
//判断图片是否处于可视区
function lazyLoad(){
// 获取图片列表,即img标签列表
var imgs = document.querySelectorAll('.lazyloading');
//可视区高度
var h=window.innerHeight
//页面被卷去的高度
var s=document.body.scrollTop
//对图片进行懒加载
for(var i=0;i<imgs.length;i++){
//判断图片是否在可视区内
if(getTop(img[i])<(h+s)){
//由于定时器是一个异步任务,则需要一个立即执行函数,若没有i的值会为图片列表长度
(function(ii){
//由于页面真实效果会有一段等待时间,则需要一个定时器定时0.5秒
setTimeout(function(){
var temp=new Image()
//隐形加载图片
temp.src=img[ii].getAttribute('data-src')
//onload判断图片是否加载完毕,真实图片加载完毕,再对图片src赋值
temp.onload=function(){
//用方法二加载图片的话代码如下:img[ii].className=''
img[ii].src=temp.src;
//让图片显现,有过渡效果慢慢显现并且标记已经加载过了
imgs[i].className='current'
}
},500)
})(i)
}
}
}
lazyload()
//滚动函数,由于滚屏事件会触发很多次,因此可以设置节流来减少滚动函数次数
window.onscroll=function(){
lazyload()
}
}
在实现过程中出现了立即执行函数,不明白请看这篇立即执行函数