Vue.js로 모호한 효과가 있는 이미지 지연 불러오기

개요

lqip-loader를 사용하여 저해상도 버전 이미지 생성

vue-lazyload에서 1에서 생성된 저해상도 이미지를 로드할 때의 이미지로 사용

이전 시 애니메이션은 css의transtion

을 사용합니다

하고 싶은 일

이런 느낌으로 초상화를 적재할 때 자리 표시가 흐려지는 초상화!

방법

lqip-loader 배포

lqip-loader는 저해상도 버전의 이미지를 출력하는 데 사용되는 웹 팩 불러오는 프로그램입니다.우선 이 도구를 가져오십시오.

npm install --save-dev lqip-loader

vue-cli를 사용하여 프로젝트를 작성하면 vue.config.js 에 설명됩니다.
vue.config.js

module.exports = {
  chainWebpack: config => {
    const imagesRule = config.module.rule('images');

    imagesRule.uses.clear();

    imagesRule
      .use('lqip-loader')
      .options({
        path: '/media',
        base64: true,
        palette: false
      })
      .loader('lqip-loader');
  }
};

웹팩을 직접 사용하려면 공식 자술 설정을 참고하십시오.

Vue-Lazyload 도입

Vue-Lazyload는 리소스 로드 지연을 위한 Vue입니다.js용 모듈.
공식 자술에 따라 가져오십시오.

초상화를 이용하다

예를 들어, 이미지 로드를 지연시키는 구성 요소LazyImage를 구현합니다.
LazyImage.vue

<template>
    <div class="lazy-image" v-lazy-container="{ selector: 'img' }">
        <img :data-src="img.src"
             :data-loading="img.preSrc"
        >
    </div>
</template>

<script>
  export default {
    name: 'LazyImage',
    props: {
      img: {
        type: Object,
        required: true,
      },
    },
  }
</script>

3, 4행에서 말한 바와 같이 lqip-loader가 출력한 저해상도 이미지는 preSrc 속성일을 통해 얻을 수 있고 원시 이미지의 경로는 src 속성을 통해 얻을 수 있다.
img를 이 구성 요소에 전달하려면 다음과 같이 하십시오.
App.vue

<lazy-image :img="require('./img/example.png')" />

부드럽게 변환

전환 애니메이션은 css를 사용할 수 있습니다.
css의 filter로blur를 가하면 이미지 불러오기가 끝날 때 filter를 꺼내면 됩니다.그 다음에transition을 마음대로 하세요.

lazy-img > img {
  filter: blur(25px);
  transition: all .2s;

  &[lazy=loaded] {
    filter: none
  }
}

참고 자료

https://github.com/hilongjw/vue-lazyload/issues/211

base64 인코딩을 포함하는 이미지 자체입니다.  ↩