prefacio
La carga de imágenes en el front-end es una parte muy importante del sitio web. Muchas imágenes del sitio web ocupan mucho espacio. El rendimiento del sitio web también es una experiencia diferente para los usuarios. Una buena experiencia aumentará la "felicidad" de los usuarios. Hoy en día, las imágenes en muchos sitios web a menudo ocupan muchos recursos. Si la imagen es demasiado grande, la eficiencia de carga es baja, se ocupan más recursos, la pantalla de carga está incompleta y la percepción del usuario será incómoda. Entonces, comprendamos brevemente qué métodos se utilizan para la carga de imágenes de front-end.
Uso básico
<img src="https://img95.699pic.com/photo/50044/9004.jpg_wh300.jpg" alt="xxx">
Generalmente, las imágenes que se muestran en nuestras páginas se muestran con etiquetas img, esta es la forma más directa, pero también hay muchos problemas. Si las imágenes en la página actual son grandes, hay muchas imágenes y la red no es muy buena, es posible que veamos que algunas imágenes se muestran de forma incompleta, algunas se muestran parcialmente o son páginas en blanco. Luego tomaremos las estrategias correspondientes para mejorar.
Desplazamiento del monitor cargando carga diferida
El ejemplo monitorea directamente el desplazamiento de la página para el cálculo de la posición, y cuando la página se desplaza a la posición correspondiente, cargamos el contenido de la imagen correspondiente.
<div>
<img class="lazy-load" src="https://source.unsplash.com/random/600" alt="">
<img class="lazy-load" src="https://source.unsplash.com/random/700" alt="">
<img class="lazy-load" src="https://source.unsplash.com/random/800" alt="">
<img class="lazy-load" src="https://source.unsplash.com/random/900" alt="">
</div>
<style>
div {
margin-top: 350px;
}
.lazy-load {
width: 200px;
height: 150px;
}
</style>
// 引入 lodash 库
<script src="https://cdn.bootcss.com/lodash.js/4.17.12-pre/lodash.core.min.js"></script>
let lazyImages = [...document.querySelectorAll('.lazy-load')]
let inAdvance = 300
function lazyLoad() {
lazyImages.forEach(image => {
if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) {
image.src = image.dataset.src; // 替换真实图片的 URL
}
})
}
lazyLoad();
window.addEventListener('scroll', _.throttle(lazyLoad, 50))
window.addEventListener('resize', _.throttle(lazyLoad, 50))
Ahora Jingdong, Taobao y otros centros comerciales de computadoras adoptan este método, al monitorear si hay imágenes descargadas en el área visible actual y, si no, se cargarán. El siguiente método también es una forma de desplazamiento de carga diferida.
API de observador de intersecciones
Ahora, hay una interfaz de observador de intersección que es conveniente para nosotros. Puede observar de forma asíncrona los cambios de intersección entre el elemento de destino y el elemento ancestro o el archivo de nivel superior. En pocas palabras, en el pasado, necesitábamos escribir funciones de eventos de monitoreo de desplazamiento por nosotros mismos. Ahora, esta API puede ayudarnos. Solo necesitamos escribir una función de observación de manera uniforme. Cada vez que el elemento que queremos observar ingresa a la ventana gráfica, ese es decir, cuando lo veamos, tomará las medidas adecuadas. Ejemplo de código:
<template>
<div class="content">
<img
v-for="(item, index) in arr"
:key="index"
src="https://bpic.51yuansu.com/pic/cover/00/19/12/57b66d41d79ad_610.jpg?x-oss-process=image/sharpen,100"
alt="网图"
data-src="https://img95.699pic.com/photo/50044/9004.jpg_wh300.jpg"
/>
</div>
</template>
<script lang="ts">
import {
defineComponent,
Directive,
isMemoSame,
onMounted,
reactive,
} from "@vue/runtime-core";
export default defineComponent({
setup() {
const arr = new Array(30);
onMounted(() => {
const imgs = document.querySelectorAll("img[data-src]");
const config = {
rootMargin: "0px",
threshold: 1,
};
let observer = new IntersectionObserver((entries, self) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let img: any = entry.target;
let src = img.dataset.src;
if (src) {
img.src = src;
//console.log(src)
img.removeAttribute("data-src");
}
// 解除观察
self.unobserve(entry.target);
}
});
}, config);
imgs.forEach((image) => {
observer.observe(image);
});
});
return {
arr,
};
},
});
</script>
Después de ejecutar, como se muestra en la figura, cuando todas las imágenes borrosas en la parte inferior estén expuestas al campo de visión, se mostrará como la imagen azul de arriba.
cromo viene con
Ingrese chrome://flags/#enable-lazy-image-loading en la dirección del navegador 
y configúrelo como Habilitado. El código se usa de la siguiente manera:
<img src="https://source.unsplash.com/random/600" alt="" lazyload="on">
ImpresionanteImagen
AwesomeImage es un componente de imagen general que admite carga diferida/carga progresiva/carga de respuesta/webp automático, y es compatible con vue2/vue3/nuxt.La
dirección del documento de uso es la siguiente Método de instalación de AwesomeImage
yarn add @awesome-image/image
//或者
npm install @awesome-image/image
La referencia en vue es la siguiente
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
createApp(App).use(store).use(AsImage,{
responsive: true,//是否是响应
progressive: true,//是否渐进加载
}).use(router).mount('#app')
Las referencias en main.ts pueden encontrar errores, y la vida correspondiente no se puede encontrar cuando se informa el contenido del error, como se muestra en la figura: 
entonces podemos declarar un módulo de declaración en el archivo .d.ts
declare module '@awesome-image/image';
Uso básico
- Establecer tamaño de imagen
- establecer estilo de imagen
- Se puede agregar una ranura de carga como elemento de marcador de posición antes de cargar
<style>
.demoimage {
width: 100%;
}
.loading {
width: 100%;
height: 100%;
background: #eee;
}
</style>
<template>
<AsImage
class="demoimage"
:width="1280"
:height="640"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
carga lenta
La carga diferida utiliza IntersectionObserver para cargar imágenes cuando ingresan al área visible. También lo mencionamos por separado arriba.
- Use el atributo perezoso (falso predeterminado) para controlar si habilitar la carga diferida, use imageLazyOffset (0px predeterminado) para establecer cuántos píxeles por adelantado para cargar la imagen
- Si se usa la carga progresiva al mismo tiempo, use placeholderLazyOffset (predeterminado 0px) para establecer cuántos píxeles por adelantado para cargar la imagen en miniatura
<style>
...
</style>
<template>
<AsImage
class="demoimage"
:width="1280"
:height="640"
:lazy="true"
:imageLazyOffset="1000px"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
carga progresiva
La carga progresiva utiliza una imagen a escala de 48 px (debe generarse con anticipación o generarse dinámicamente con un servicio de imágenes) como marcador de posición y se muestra sin problemas a través de la animación que se desvanece cuando se cargan el marcador de posición y la imagen original. Admite la carga progresiva de imágenes en modo SSR antes de que el cliente inyecte agua.
- El imageUrlGenerator debe configurarse para obtener detalles, consulte Obtener la imagen en miniatura de 48 píxeles correspondiente
- Use el atributo progresivo (falso predeterminado) para controlar si la carga progresiva está habilitada
- Establezca el atributo de duración (predeterminado 1, unidad de segundo) para controlar la duración de la animación de aparición gradual
<template>
<AsImage
class="demoimage"
:width="1280"
:height="640"
:progressive="true"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
carga de respuesta
La carga receptiva carga imágenes de diferentes tamaños según el ancho de la pantalla (deben generarse con anticipación o generarse dinámicamente con servicios de imágenes)
- ImageUrlGenerator debe configurarse para obtener detalles, consulte Obtención de direcciones URL de imágenes de diferentes tamaños
- Use el atributo de respuesta (falso predeterminado) para controlar si la carga de respuesta está habilitada
- Use la propiedad de puntos de interrupción (predeterminada [640, 768, 1024, 1280, 1536]) para controlar el ancho de imagen opcional
- Use el atributo de tamaños (predeterminado 100vw) para controlar cómo elegir el ancho de la imagen
ejemplo sencillo
<template>
<AsImage
class="demoimage"
:width="1536"
:height="640"
:responsive="true"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
Cargue imágenes de tamaño 640, 768, 1024, 1280, 1536 según el ancho de la pantalla, por ejemplo: cuando el ancho de la pantalla es 1000px, el ancho es 1024px
ejemplo complejo
<template>
<AsImage
class="demoimage"
:width="1440"
:height="640"
:responsive="true"
:sizes="(max-width: 640px) 100vw, (max-width: 1200px) 1000px, 50vw"
:breakpoints="[640, 1024, 1440]"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
Usado arriba para representar:
- Cuando el ancho de la pantalla sea inferior a 640 px, seleccione la imagen al 100 % del ancho, correspondiente a los puntos de interrupción, luego cargue la imagen con un ancho de 640 px
- Cuando el ancho de la pantalla sea inferior a 1200 px, seleccione la imagen de acuerdo con el ancho de 1000 px, correspondiente a los puntos de interrupción, luego cargue la imagen con un ancho de 1024 px
- En otros casos, seleccione la imagen de acuerdo con el ancho del 50 % (en el uso real, el ancho se establecerá en el 50 % con css), correspondiente a los puntos de interrupción, luego:
- El ancho de la pantalla es inferior a 1280 px y el ancho de carga es de 640 px image
- El ancho de la pantalla es inferior a 2048 px y el ancho de carga es de 1024 px image
- El ancho de la pantalla es inferior a 2880 px y el ancho de carga es de 1440 px image
cargar WebP
Algunos proveedores de servicios de imágenes o servicios de desarrollo propio brindan la función de cargar automáticamente imágenes en formato WebP. Para situaciones que no admiten la compatibilidad automática, puede especificar auto-webp como verdadero (falso predeterminado) para agregar la función de ser compatible con WebP. Para una navegación compatible El navegador carga automáticamente imágenes webp.
<template>
<AsImage
class="demoimage"
:width="1280"
:height="640"
:auto-webp="true"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
//cdn.com/image.jpg?format=webp se cargará como se indica arriba ( ver imageUrlGenerator para la URL específica )
Otros parámetros de procesamiento de imágenes
- Quanlity especifica la calidad de la imagen
- formato especifica el formato de la imagen
<template>
<AsImage
class="demoimage"
:width="1280"
:height="640"
:quanlity="90"
:format="png"
src="//cdn.com/image.jpg"
>
<template #loading>
<div class="loading" />
</template>
</AsImage>
</template>
//cdn.com/image.jpg?quanlity=90&format=png se cargará como se indica arriba ( ver imageUrlGenerator para la URL específica )
impresionanteImagenResumen
El complemento tiene muchas formas de cargar imágenes, que pueden adaptarse al procesamiento de imágenes en nuestro proyecto. También carga wenGL, y los estudiantes interesados pueden ir a su sitio web oficial para verificar y aprender.
Carga de visualización de imagen progresiva
Vue utiliza una pantalla de complemento de imagen progresiva
npm install progressive-image --save
Referenciado en main.js
import progressive from 'progressive-image/dist/vue'; // 渐进式
import 'progressive-image/dist/index.css';//样式
Vue.use(progressive, {
removePreview: true,
scale: true
})
El código de la página es el siguiente
<template>
<div class="progressive">
<img class="preview" v-progressive="http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg" src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg" />
</div>
</template>
srcSet de carga sensible
Según el tamaño de nuestra pantalla actual, se carga la imagen correspondiente, lo que reduce el desperdicio de recursos.El código de ejemplo es el siguiente:
<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="300px">
Muestre la imagen correspondiente de acuerdo con el tamaño de imagen establecido actualmente y el código en la imagen. Si el tamaño se establece en 300 px, se mostrará una imagen 2.png.Si los tamaños se cambian a 1200 px, se mostrará una imagen 1.jpg. El orden de srcset no afectará el resultado de visualización final.
Imagen de fondo método de carga diferida
vue-lazyLoad
El complemento utilizado en vue es vue-lazyLoad, que se utiliza de la siguiente manera
// npm or cnpm
(c)npm install vue-lazyLoad --save-dev
// yarn
yarn add vue-lazyLoad -D
Referenciado en main.ts de la siguiente manera
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueLazyLoad from "vue-lazyload"
createApp(App).use(store).use(VueLazyLoad,{
preLoad:1,//如果该参数没有就是初始全部加载 范围时0-1 是距离顶部距离多少进行加载
}).use(router).mount('#app')
El ejemplo utilizado en el código es el siguiente
//html
<div class="boximag" v-lazy:background-image="require('../assets/img/1.jpeg')"></div>
//css
.boximag{
width: 100%;
height: 300px;
border: 1px solid #ccc;
background-repeat: no-repeat;
background-size: cover;
}
El código anterior es la carga diferida del fondo, si es la carga diferida de la imagen, el código es el siguiente
<img v-lazy="require('../assets/img/1.jpeg')">
Al usar v-lazy en lugar de v-bind:src, también se desplazará a la posición correspondiente para cargar el efecto.Si 
el parámetro preLoad se establece en 0.5 en main.ts, el efecto de la imagen de la página es como se muestra arriba, el primero la imagen se muestra normalmente, y la segunda La primera y la tercera imagen no llegan a la mitad de la página actual y se muestran vacías.
vue3-perezoso
También hay un complemento de carga lenta vue vue3-lazy
// npm or cnpm
npm install vue3-lazy -S
// yarn
yarn add vue3-lazy
El código se cita de la siguiente manera
import lazyPlugin from 'vue3-lazy'
createApp(App)
.use(lazyPlugin, {
loading: require('@/assets/images/default.png'), // 图片加载时默认图片
error: require('@/assets/images/error.png')// 图片加载失败时默认图片
})
.mount('#app')
Utilice el ejemplo de código
<img v-lazy="require('../assets/img/1.jpeg')">
Se usa de la misma manera que vue-lazyLoad en el que se usa la etiqueta de la imagen, pero carece del método de carga diferida de la imagen de fondo. Puede usarlo de acuerdo con sus propios escenarios de uso.
Resumir
Hay muchas formas de cargar imágenes frontales y los escenarios de aplicación serán diferentes. También hay muchos problemas en el proceso de carga de imágenes. Para que nuestro sitio web sea más cómodo de usar, necesitamos optimizarlo continuamente. Esto es lo que nuestro front-end debe aprender. Puede haber mucho contenido que no he resumido. arriba Si tiene una mejor manera, puede decirme, aprendamos y crezcamos juntos.
Referencias
https://github.com/hilongjw/vue-lazyload
https://github.com/ustbhuangyi/vue3-lazy
https://awesome-image.vercel.app/
https://zhuanlan.zhihu.com/p/ 323174003