在 vuejs 中使用 vanilla-lazyload

Question

我是 Vue-js 的新手，我正在尝试使用 this。

我的应用不是 SPA，我也在使用 Laravel。

我试过了，效果很好：

const app = new Vue({
    el: '#app',
    mounted() {
        this.myLazyLoad = new LazyLoad({
            elements_selector: '.lazy',
            class_loaded: 'lazy-loaded',
            load_delay: 500, //adjust according to use case
            threshold: 100, //adjust according to use case,
            callback_enter: function(el) {
                console.log(el.getAttribute("data-src"));
            }
        }); 
    }
});

 <img data-src="{{ $featuredItem->anime->getPortraitImg()}}" 
    class="lazy img-fluid" src="/img/placeholder-anime.jpg">

但是当我尝试在组件中使用 lazyload 时出现问题。例如：

export default {
  mounted() {
        console.log('Component mounted.');
        console.log(Vue.prototype.LazyLoad);

        this.myLazyLoad = new LazyLoad({
            // elements_selector: '.lazyx',
            container: document.getElementById('lazyContainer')                
        });

        // myLazyLoad.loadAll();
    },
    data() {
        return {
            episodes: {},
            currentPage: 2      
        }  
    },
    methods: {
        loadMoreEpisodes() {
            let uri = '/api/v1/episodes?page=' + this.currentPage;

            this.axios.get(uri).then(response => {
                console.log(response.data.data);

                if (this.episodes.length === undefined) {
                    this.episodes = response.data.data;
                } else {
                    this.episodes = this.episodes.concat(response.data.data);
                }

                this.myLazyLoad.update();
                this.myLazyLoad.loadAll();
            });
        }
    }
}

axios 插入的新数据无法被 lazyload 插件识别。

我正在按照文档中的说明使用 this.myLazyLoad.update();，但我无法使其正常工作。有什么建议吗？

Answer 1

我认为当您调用 update() 方法时 DOM 没有更新。您可以尝试使用 $nextTick 吗？

this.$nextTick(() => {
  this.myLazyLoad.update()
})

在 vuejs 中使用 vanilla-lazyload

use vanilla-lazyload with vuejs

lazy-loading

vue.js