静态图片延迟加载
-
为了不影响第一次加载页面的速度 一般网页的大图需要进行延迟加载
-
给要加载的图片套一个div并添加一个背景色 进行占位
-
演示代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>静态图片的延迟加载</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#box {
width: 880px;
height: 540px;
margin: 0 auto;
background-color: pink;
}
#box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
const oDiv = document.getElementById('box')
//1s后加载
setTimeout(imgLoad, 1000)
function imgLoad() {
const oImg = document.createElement('img')
oImg.src = './images/1.jpg'
oImg.alt = '四宫辉夜'
//页面加载完成执行
oImg.onload = function () {
oDiv.appendChild(oImg)
//添加过渡显现效果
transition(this)
}
}
function transition(ele) {
let val = 0
changeOpa()
function changeOpa() {
//首先清除定时器
clearTimeout(ele.timer)
ele.style.opacity = val
val += 0.04
if (val >= 1) {
ele.style.opacity = 1
}
//直到opacity为1
ele.timer = setTimeout(changeOpa, 10)
}
}
</script>
</body>
</html>