principio
La etiqueta img tiene un atributo src. Cuando src no está vacío, el recurso se cargará de forma asincrónica cuando el elemento img se represente en la página.
Solo necesitamos configurar el src del elemento img que no aparece en el área visual para que esté vacío, y luego esperar a que aparezca en la pantalla antes de configurar su src.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<style>
*{
margin: 0;
}
div {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid black;
}
img {
width: 100%;
height: 80%;
}
</style>
</head>
<body>
<div>
1
<img>
</div>
<div>
2
<img>
</div>
<div>
3
<img>
</div>
<div>
4
<img>
</div>
<div>
5
<img>
</div>
<div>
6
<img>
</div>
<div>
7
<img>
</div>
<div>
8
<img>
</div>
</body>
<script>
let clientHeight = document.documentElement.clientHeight
const imgItems = document.getElementsByTagName('img')
const setSrc = ()=>{
for(let i=0;i<imgItems.length;i++){
let detail = imgItems[i].getBoundingClientRect()
console.log(i+1,'是否在视口',detail.top<clientHeight)
if(detail.top<clientHeight&&!imgItems[i].src){
imgItems[i].src = './4.jpg'
}
}
}
//初次设置src
setSrc()
//防抖
function handle (time=1000){
let timer;
return ()=>{
if(timer) {
clearTimeout(timer)
}
timer = setTimeout(()=>{
setSrc()
},time)
}
}
//监听滑动
window.addEventListener('scroll',handle(1000))
//监听窗口
window.addEventListener('resize',()=>{
clientHeight = document.documentElement.clientHeight
setSrc()
})
</script>
</html>
Amplíe el uso del complemento vue para implementar simplemente una instrucción v-lazy para implementar la carga diferida de imágenes
Código:
<!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 {
display: block;
width: 400px;
height: 400px;
}
</style>
<script src="/node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>姓名：{
{
name}}</h2>
<h2>年纪：{
{
age}}</h2>
<br />
<div>
<img class="img" v-for="item in list" :key="item.id" v-lazy="item" />
</div>
</div>
</body>
<script>
const plugin = {
install(Vue) {
function lazy(el, binding) {
const io = new IntersectionObserver((entries, observe) => {
if(entries[0].isIntersecting){
setTimeout(()=>{
el.src = binding.value.data_src
},1000)
//解除绑定
observe.disconnect(el)
io.disconnect()
}
});
io.observe(el);
}
//实现自定义指令
Vue.directive("lazy", {
// 表示dom 已经被挂载到父节点上
inserted: lazy,
});
},
};
Vue.use(plugin);
new Vue({
el: "#root",
data() {
return {
name: "kd",
age: 18,
io: null,
obj: {
a: 12,
b: "属性",
},
list: [
{
id: 1,
data_src: "./img/1.jpg",
},
{
id: 2,
data_src: "./img/1.jpg",
},
{
id: 3,
data_src: "./img/1.jpg",
},
{
id: 4,
data_src: "./img/1.jpg",
},
{
id: 5,
data_src: "./img/1.jpg",
},
{
id: 6,
data_src: "./img/1.jpg",
},
],
};
},
mounted() {
},
});
</script>
</html>
Resumir
Puntos de conocimiento relacionados
intersección de la API h5Observar instrucciones personalizadas de vue del complemento personalizado de vue