vue2使用vue-lazyload等待图片加载完成，后手动触发图片的懒加载

在Vue2中，可以使用vue-lazyload插件来实现图片的懒加载。如果想要手动触发图片的懒加载，你可以使用以下步骤： 1. 在模板中，添加一个图片的占位符，并设置其src属性为一个默认的占位图片，例如： ```html <img v-lazy="imageSrc" src="loading.gif"/> ``` 2. 在组件中，使用`Vue.prototype.$Lazyload`方法获取到vue-lazyload的实例。例如： ```javascript import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) export default { mounted () { this.lazyload = Vue.prototype.$Lazyload({/* options */}) }, methods: { loadImages () { const images = document.querySelectorAll('img[v-lazy]') images.forEach(image => { if (this.isVisible(image)) { this.lazyload.lazyLoad(image) } }) }, isVisible (element) { const rect = element.getBoundingClientRect() return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ) } } } ``` 3. 在组件的`mounted`钩子中，初始化vue-lazyload实例，并将其赋值给组件的`lazyload`属性。 4. 在组件的`loadImages`方法中，使用`querySelectorAll`方法获取到所有设置了`v-lazy`指令的图片元素，并遍历这些元素。如果某个图片元素可见，则调用`lazyload.lazyLoad`方法手动触发它的懒加载。 5. 在组件中，可以在`window`对象的`scroll`事件和`resize`事件中调用`loadImages`方法，以便在滚动和窗口大小变化时动态地触发图片的懒加载。例如： ```javascript mounted () { this.lazyload = Vue.prototype.$Lazyload({/* options */}) window.addEventListener('scroll', this.loadImages) window.addEventListener('resize', this.loadImages) }, beforeDestroy () { window.removeEventListener('scroll', this.loadImages) window.removeEventListener('resize', this.loadImages) } ```