如何使用 VueJs 插件 vue-lazyload

Question

我按照分步文档指南使用插件，但我仍然看不到它的工作原理

1. VueJs 2x
2. VueCLI 3.9.3

主.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

元件

<div v-lazy-container="{ selector: 'img' }">
<img data-src="https://images.pexels.com/photos/1677275/pexels-photo-1677275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/1612461/pexels-photo-1612461.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/979003/pexels-photo-979003.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/2444444/pexels-photo-2444444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">  
<img data-src="https://images.pexels.com/photos/949380/pexels-photo-949380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/1656579/pexels-photo-1656579.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">  
</div>

对象是在视口上加载图像，但它加载所有照片

Answer 1

错误是我需要固定容器的大小，以便库可以工作，这样图像就不会同时加载。(只需添加高度(

<div v-lazy-container="{ selector: 'img' }" style='height: 500px;'>
<img data-src="https://images.pexels.com/photos/1677275/pexels-photo-1677275.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/1173777/pexels-photo-1173777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img data-src="https://images.pexels.com/photos/2827400/pexels-photo-2827400.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/1612461/pexels-photo-1612461.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/979003/pexels-photo-979003.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/2444444/pexels-photo-2444444.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">  
<img data-src="https://images.pexels.com/photos/949380/pexels-photo-949380.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">  
<img data-src="https://images.pexels.com/photos/1656579/pexels-photo-1656579.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">  
</div>