웹사이트에서 이미지 사용은 매우 일반적이며, 이미지 로딩을 최적화하는 방법은 개발자의 초점 중 하나가 되었습니다. 중요한 최적화 중 하나는 이미지 지연 로딩입니다. 즉, 표시 영역의 이미지는 사용자가 웹 페이지를 스크롤할 때만 로드되고 스크롤되지 않은 영역에는 로드되지 않습니다. 사용자 경험.
Vue 프레임워크를 사용할 때 제공되는 지침을 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 쉽게 구현할 수 있습니다.
npm i vue-lazyload -S
import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, // 预加载的宽高比,默认为 1,即 PhotoShop 中的 1:1 error: 'path/to/error.png', // 当加载图片失败时的占位图 loading: 'path/to/loading.gif', // 加载中时的占位图 attempt: 1 // 图片加载的尝试次数 })
그중 preLoad는 미리 로드된 가로 세로 비율을 지정합니다. 예를 들어 다음과 같이 설정하면 됩니다. 1.3으로 설정하면 이미지가 사전 로드될 때 너비는 대상 너비의 1.3배가 됩니다. 오류 및 로드는 각각 로드 실패 시 이미지 자리 표시자 이미지이고 로드 시도는 이미지 로드 시도 횟수입니다.
src
속성을 v-lazy
명령으로 바꿉니다: src
属性替换为 v-lazy
指令:<img v-lazy="path/to/image.png">
<template> <div class="container"> <div class="item" v-for="item in list"> <img v-lazy="item.src"> <!-- 图片使用懒加载 --> <p>{{ item.text }}</p> </div> </div> </template> <script> export default { data() { return { list: [ { src: 'path/to/image-1.png', text: '图片 1' }, { src: 'path/to/image-2.png', text: '图片 2' }, { src: 'path/to/image-3.png', text: '图片 3' } ] } }, mounted() { this.$nextTick(() => { // 启用懒加载 this.$lazyload(this.$refs.container) }) } } </script>
上述代码在页面中循环展示一个图片列表,每个图片都使用了懒加载,同时在 mounted
钩子函数中指定启用懒加载的区域为 container
mounted
후크 함수에서 지연 로딩이 활성화된 위치 영역은 컨테이너
모듈이므로 이미지의 지연 로딩이 달성될 수 있습니다. 🎜 자리 표시자 이미지 제작과 관련하여 온라인 도구나 PhotoShop과 같은 도구를 사용하여 웹사이트 스타일에 맞는 자리 표시자 이미지를 만들 수 있습니다. 🎜🎜🎜위 단계를 통해 Vue에서 이미지 및 자리 표시자 이미지의 지연 로딩 효과를 쉽게 구현할 수 있으며, 이를 통해 웹사이트의 로딩 부담을 크게 줄이고 사용자 경험을 향상시킬 수 있습니다. 🎜위 내용은 Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!