在 Vue/Laravel 中延迟加载图像答案

【问题标题】：Lazy loading images in Vue/Laravel在 Vue/Laravel 中延迟加载图像
【发布时间】：2018-01-24 17:53:05
【问题描述】：

我试图在我的 Laravel/Vue 项目中使用 jQuery Lazy Loading，但我很难让图像出现在我的 Vue 组件中。我有以下我认为可行的 img 块：

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

我确实在这里找到了另一个问题 - Static image src in Vue.js template - 但是当我尝试这种方法时，我得到了这个：Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

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

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

【问题讨论】：

在您调用 $(img.lazy).lazyload() 时，Vue 没有设置 data-original。检查时<img> 的标记是否正确？
啊，有可能。标记本身看起来是正确的，如果我在检查器中将data-original 更改为src，图像就会显示出来，所以我知道链接是正确的。我在模板视图正文的末尾调用$("img.lazy").lazyload()，我会尝试移动它，看看是否有区别。

标签： vue.js vuejs2

【解决方案1】：

尝试将对 $("img.lazy").lazyload() 的调用移动到 Vue 实例上的 mounted() 方法中。我刚刚遇到了与 Vue 和 jQuery Lazyload 类似的问题，并且为我解决了这个问题。例如：

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

【讨论】：

【解决方案2】：

我在互联网上找到了很多模块，但我喜欢尽可能避免使用模块。所以我想出了别的东西，我不知道它是否是最好的，但它可以工作并且我没有看到任何性能损失，我在页面加载时延迟加载所有图像。如果你有很多，你可能更喜欢滚动，但如果我的答案符合你的需要，我想你会弄清楚的。

为此您需要 vueX，但我会避免设置，因为这不会回答您的问题。

如果像我一样，您有某种Index.vue 组件，其主要用途是启动所有子组件（例如，我曾经为 vue-router 执行此操作），请在其中放置一个 mount() 函数：

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);
}

=> 在页面加载时，我只是将 store 中的 page_load 变量设置为 true。

然后，在您想要延迟加载图像的任何组件中，只需使用 2 个计算值（我使用了一个包含在组件中的 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_loaded() 目标是返回我所说的 store page_loaded 变量。

image() 目标是实际加载图像。

我将它用于内联 CSS 背景图像属性，所以我的 HTML 看起来像这样：

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

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

【讨论】：