Question

我正在按照分步文档指南使用该插件，但仍然无法正常工作

VueJs 2x
VueCLI 3.9.3

main.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>

如何使用VueJs插件vue-lazyload

1 个答案: