vue.jsのコンポーネントのtemplate表示タイミングについて。

Question

vue.jsのコンポーネントのtemplate表示タイミングについて。

商品画像一覧のようなサムネ等の画像表示にコンポーネント化してtemplate内にコードを書いているのですが

コンポーネントのtemplateのレンダリングがdomが終わったららしくて
表示されると共に、ページ全体縦幅がサムネ縦幅分、随時伸びていく感じになるのですが、
何か良い方法ありますでしょうか？

vue.jsを使わず、htmlでimg遅延ロードしている場合は
画像が表示される領域は最初からレンダリングされていて、遅延ロードでそこにただ当て込まれるため
上記のように、ページ全体縦幅がどんどん増えていくことはないです。

コンポーネントを使わずに, htmlと処理だけvueのインスタンス内 el:#app 等で処理を書けば
htmlは最初からある状態なので縦幅が増えることはないですが

コンポーネントでの何か対応があるのかを知りたいです。

環境はLaravel,blade,vue.jsです。

m2l さん

<template>
    <span class="lazyload thumb"
          v-bind:data-bg="'/storage/' + item.img"
          v-bind:style="{'height': height + 'px'}"
    ></span>
</template>

<script>
    export default {
        props: {
            item: {
                type: Object
            }
        },

        data() {
            return {
                height: null,
            }
        },

        methods: {
            pTop() {
                this.height = Math.floor((this.$el.offsetWidth / 10) * 7);
            }
        },

        mounted() {
            this.pTop();
            window.addEventListener('resize', this.pTop)
        },

        beforeDestroy: function () {
            window.removeEventListener('resize', this.pTop)
        }
    }
</script>

このような感じです。
レスポンシブに対応させているため、heightは随時計算させています。

htmlからは呼び出しは

                <thumb-component
                    v-bind:item="{{ $item }}"
                ></thumb-component>

このようにしてます。

Answer 1

ライブラリ依存ではありますが、vue用の遅延ロードライブラリがありますのでそちらを使うと良いと思います。
参考のサイトもお載せいたします。
https://hafilog.com/lazyload

Comments

[kgi]

説明が足りなかったです。
vueの方でも遅延ロードはしております。

htmlで記載の場合サムネの枠にcssでwidth:100px、height: 60px等しているので
最初から枠が確保された状態でその枠の中に画像が収まるのですが

vueのtemplateの場合dom完了するまでtemplateが反映されていないので
cssも効かず、
レンダリングがされてから、上記でいう縦60px分の縦幅が追加されていく状態になってしまいます。
ガン、ガン、ガンとページが長くなっていくイメージです。

[m2l]

大変失礼致しました。
該当のコードをお見せ頂けますとイメージしやすいのですがお見せ頂くことは可能でしょうか？
（質問の編集から行えます。）
また、vueのほうで親コンポーネントと子コンポーネントに分けている状態でimgタグのsrcをロードしているのであれば、その上位のhtmlタグのcssにmin-heightなど当て込む様にして頂ければ解決可能かと思います。

[kgi]

記入いたしました。

[m2l]

ご対応いただきましてありがとうございました。
頂いたソースコードをもとに少し記載してみました。
下記のような形では実現できるのかなとは思いました。
（頂きましたコードを基に再現しております。）
https://codepen.io/masanori0209/pen/oNZdyyq

templateの描画自体はprops要素の受け渡しができるタイミングではDOM生成されているはずなので、
thumb-componentの上位のほうで、itemが読み込み終わるまでDOMを隠す（v-if等）はされていないでしょうか？

[kgi]

確認させていただきました。ありがとうございます。
v-if等はしておりません。

ちょっとわかりづらいですが、
ブラウザで横幅をものすごく細くして、縦幅を長くして
ロードした瞬間に表示領域にスクロールがなく
画像が読み込まれてから縦幅が変わっているのでスクロールが表示される

表示の形式としては
https://getbootstrap.com/docs/4.0/examples/album/
サムネと内容がセットになっている感じです。

youtubeのページのような感じです。
ほんの最初の一瞬なのでわかりづらいですが
サムネが読み込まれる前に空の枠みたいな領域分です