在Vue/Laravel中延迟加载图像

Question

我试图使用jQuery懒惰加载在我的Laravel/Vue项目，但我正在努力让图像出现在我的Vue组件。我有以下img块，我认为会工作：

<img v-if="vehicle.photo_path != null" :data-original="'/storage/vehicles/' + vehicle.photo_path" class="lazy" height="180" width="150"/>

我确实在这里发现了另一个问题-Vue.js模板中的静态图像src-但是当我尝试该方法时，我得到了这样的结果：属性内部的插值已被删除。改用v-bind或冒号速记。

因此，我切换回v-bind方法，但我得到的只是一个带有灰色边框的白色框-没有图像。但是，如果我在src属性上使用v-bind，我可以正确地看到图像。

我知道我已经正确地实现了懒惰加载插件，因为我可以在我的网站上的其他地方成功地调用它（例如在刀片视图上），但我不确定我哪里出错了。谢谢你。

Answer 1

我在网上发现了很多模块，但我喜欢尽量避免使用模块。所以我想出了另外一个办法，我不知道它是否是最好的，但它很有效，而且我没有看到任何性能损失，我在页面加载时懒散地加载所有图像。如果你有很多的话，你可能更喜欢滚动，但我想如果我的答案适合你的需要，你会发现这一点的。

您将需要vueX来完成此操作，但我将避免设置，因为这并不是对您问题的回答。

如果像我一样，你有某种Index.vue组件，它的主要用法是启动所有的子组件（例如，我用vue-router来做），在其中放置一个挂载（）函数：

mounted(){
    const ctx = this;

    // You could use this method, but if you reload the page, the cache of the browser won't allow your JS to trigger .onload method, so better use what's after.
    /*window.onload = function(){
        console.log('page loaded, can load images');
        ctx.$store.dispatch('setPageLoaded', true);
    }*/

    let interval = setInterval(function() {
        if(document.readyState === 'complete') {
            clearInterval(interval);
            ctx.$store.dispatch('setPageLoaded', true);
        }
    }, 100);
}

=

然后，在任何要延迟加载映像的组件中，只需使用2个computed（我使用了包含在组件中的mixin，以避免重复某些代码）：

computed: {
    page_loaded(){
        return this.$store.getters.getPageLoaded;
    },
    image(){
        if(this.page_loaded){
            console.log('starting loading image');

            if(this.product.picture){
                return resizedPicture(this.product.picture, this.width, this.height);
            }else if(this.product.hasOwnProperty('additional_pictures') && this.product.additional_pictures.length){
                return resizedPicture(this.product.additional_pictures[0], this.width, this.height);
            }

            return '';
        }
    }
}

page\u loaded（）目标是返回我提到的存储页面加载变量。

image（）目标是实际加载图像。

我将其用于内联CSS背景图像属性，因此我的HTML如下所示：

<span v-if="page_loaded" class="image" :style="'background-image:url('+image+')'" :width="1200" :height="900"></span>

我希望它能有所帮助，但是正如我所说的，如果它没有优化，请随时告诉我。

Answer 2

尝试将对$（“img.lazy”）.lazyload（）的调用移动到Vue实例上的mounted（）方法中。我刚刚在Vue和jQueryLazyload上遇到了一个类似的问题，这为我解决了这个问题。例如：

var app = new Vue({
    el: ...
    data() ...
    computed: ... 
    methods: ...
    mounted() {
        $("img.lazy").lazyload()
    }
})