在Vue3中，如何根据用户行为和网络状况来智能地加载和缓存图片？

alankuo

于 2024-12-09 05:55:18 发布

阅读量1.1k

点赞数 29

文章标签：前端

本文链接：https://blog.csdn.net/alankuo/article/details/144316551

版权

根据用户行为加载和缓存图片
- 用户交互触发加载与缓存
  - 点击加载和缓存：在单文件组件中，可以为某个元素（如按钮）绑定点击事件来触发图片加载。例如，有一个“查看详情”按钮，点击后加载并展示商品的高清图片。同时，将加载后的图片缓存起来，方便用户再次查看时快速显示。

<template>
    <div>
        <button @click="loadProductImage">查看详情</button>
        <img v - if="productImageLoaded" :src="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const productImageLoaded = ref(false);
const productImageSrc = ref('');
const loadProductImage = async () => {
    try {
        const response = await axios.get('https://example.com/api/product - high - res - image');
        productImageSrc.value = response.data;
        productImageLoaded.value = true;
        // 将图片缓存到localStorage（简单示例）
        localStorage.setItem('product - high - res - image', response.data);
    } catch (error) {
        console.error('Error loading image:', error);
    }
};
</script>

 - **滚动加载和缓存**：对于长列表中的图片（如商品列表、新闻列表等），可以利用滚动事件来加载图片。当列表项进入可视区域时加载图片，并根据用户滚动行为来预测可能需要的图片并提前缓存。可以使用`IntersectionObserver`来检测元素是否进入可视区域。

<template>
    <div>
        <div v - for="(product, index) in productList" :key="index" class="product - item">
            <img v - if="product.imageLoaded" :src="product.imageSrc" alt="Product Image">
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const productList = ref([
    { imageLoaded: false, imageSrc: '' },
    // 其他产品对象
]);
const loadProductImages = async () => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const productIndex = productList.value.findIndex((product) => product === entry.target);
                const loadImage = async () => {
                    try {
                        const response = await axios.get('https://example.com/api/product - image/' + productIndex);
                        productList.value[productIndex].imageSrc = response.data;
                        productList.value[productIndex].imageLoaded = true;
                        // 缓存图片（简单示例）
                        localStorage.setItem('product - image -'+ productIndex, response.data);
                    } catch (error) {
                        console.error('Error loading image:', error);
                    }
                };
                loadImage();
                observer.unobserve(entry.target);
            }
        });
    });
    productList.value.forEach((product) => {
        observer.observe(product);
    });
};
onMounted(() => {
    loadProductImages();
});
</script>

用户偏好设置影响加载和缓存策略
- 画质偏好：如果应用允许用户设置画质偏好（如“高画质”、“低画质”），可以根据用户的选择来加载不同分辨率的图片。同时，根据用户的画质偏好缓存相应的图片版本。例如，用户选择高画质时，加载高清图片并缓存高清版本；用户选择低画质时，加载低分辨率图片并缓存低分辨率版本。

<template>
    <div>
        <select v - model="imageQualityPreference">
            <option value="high">高画质</option>
            <option value="low">低画质</option>
        </select>
        <img :src="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const imageQualityPreference = ref('high');
const productImageSrc = ref('');
const loadProductImage = async () => {
    let imageUrl;
    if (imageQualityPreference.value === 'high') {
        imageUrl = 'https://example.com/api/product - high - res - image';
        // 检查高画质缓存
        const cachedHighResImage = localStorage.getItem('product - high - res - image');
        if (cachedHighResImage) {
            productImageSrc.value = cachedHighResImage;
            return;
        }
    } else {
        imageUrl = 'https://example.com/api/product - low - res - image';
        // 检查低画质缓存
        const cachedLowResImage = localStorage.getItem('product - low - res - image');
        if (cachedLowResImage) {
            productImageSrc.value = cachedLowResImage;
            return;
        }
    }
    try {
        const response = await axios.get(imageUrl);
        productImageSrc.value = response.data;
        // 根据画质偏好缓存图片
        if (imageQualityPreference.value === 'high') {
            localStorage.setItem('product - high - res - image', response.data);
        } else {
            localStorage.setItem('product - low - res - image', response.data);
        }
    } catch (error) {
        console.error('Error loading image:', error);
    }
};
loadProductImage();
</script>

根据网络状况加载和缓存图片
- 检测网络状况并调整加载策略
  - 网络类型判断：可以使用navigator.connection对象来获取网络类型（如wifi、cellular等）和网络状态（如online、offline）。根据网络类型和状态来决定加载高分辨率还是低分辨率的图片。例如，在wifi网络下加载高清图片，在cellular网络下加载低分辨率图片。

<template>
    <div>
        <img :src="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const productImageSrc = ref('');
const loadProductImage = async () => {
    const connection = navigator.connection;
    let imageUrl;
    if (connection.effectiveType === 'wifi') {
        imageUrl = 'https://example.com/api/product - high - res - image';
    } else {
        imageUrl = 'https://example.com/api/product - low - res - image';
    }
    try {
        const response = await axios.get(imageUrl);
        productImageSrc.value = response.data;
        // 根据网络类型缓存相应画质的图片
        if (connection.effectiveType === 'wifi') {
            localStorage.setItem('product - high - res - image', response.data);
        } else {
            localStorage.setItem('product - low - res - image', response.data);
        }
    } catch (error) {
        console.error('Error loading image:', error);
    }
};
loadProductImage();
</script>

 - **网络带宽和延迟考虑**：除了网络类型，还可以考虑网络带宽和延迟来调整图片加载策略。可以使用`navigator.connection.downlink`获取网络带宽估计值（单位是Mbps）。如果带宽较低或者延迟较高，可以先加载低质量的图片占位，然后在网络状况改善后再加载高质量的图片。

<template>
    <div>
        <img :src="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const productImageSrc = ref('');
const loadProductImage = async () => {
    const connection = navigator.connection;
    let imageUrl;
    if (connection.downlink >= 5) {
        imageUrl = 'https://example.com/api/product - high - res - image';
    } else {
        imageUrl = 'https://example.com/api/product - low - res - image';
    }
    try {
        const response = await axios.get(imageUrl);
        productImageSrc.value = response.data;
        // 根据网络带宽缓存相应画质的图片
        if (connection.downlink >= 5) {
            localStorage.setItem('product - high - res - image', response.data);
        } else {
            localStorage.setItem('product - low - res - image', response.data);
        }
    } catch (error) {
        console.error('Error loading image:', error);
    }
};
loadProductImage();
</script>

网络事件监听与动态调整
- 在线/离线事件监听：监听window对象的online和offline事件，当网络从离线变为在线时，重新加载之前因离线未加载或加载失败的图片。可以将未加载成功的图片链接存储在一个数组中，在网络恢复时遍历这个数组来加载图片。

<template>
    <div>
        <img :src="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const productImageSrc = ref('');
const unloadedImages = ref([]);
const loadProductImage = async () => {
    try {
        const response = await axios.get('https://example.com/api/product - image');
        productImageSrc.value = response.data;
        // 缓存图片
        localStorage.setItem('product - image', response.data);
    } catch (error) {
        unloadedImages.value.push('https://example.com/api/product - image');
    }
};
const handleOnline = async () => {
    for (const imageUrl of unloadedImages.value) {
        try {
            const response = await axios.get(imageUrl);
            // 更新对应的图片src
            // 这里假设只有一个图片需要更新，如有多个需要更复杂的逻辑
            productImageSrc.value = response.data;
            // 缓存图片
            localStorage.setItem('product - image', response.data);
        } catch (error) {
            console.error('Error re - loading image:', error);
        }
    }
    unloadedImages.value = [];
};
window.addEventListener('online', handleOnline);
loadProductImage();
</script>

 - **网络质量变化监听（进阶）**：在一些现代浏览器中，可以使用`navigator.connection.addEventListener('change', callback)`来监听网络质量的变化。当网络质量变好或变差时，动态调整图片加载策略，如重新加载更高或更低质量的图片，或者调整缓存策略。

<template>
    <div>
        <img :src="productImageSrc" alt="Product Image">
    </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const productImageSrc = ref('');
const loadProductImage = async () => {
    const connection = navigator.connection;
    let imageUrl;
    if (connection.effectiveType === 'wifi') {
        imageUrl = 'https://example.com/api/product - high - res - image';
    } else {
        imageUrl = 'https://example.com/api/product - low - res - image';
    }
    try {
        const response = await axios.get(imageUrl);
        productImageSrc.value = response.data;
        // 根据网络类型缓存相应画质的图片
        if (connection.effectiveType === 'wifi') {
            localStorage.setItem('product - high - res - image', response.data);
        } else {
            localStorage.setItem('product - low - res - image', response.data);
        }
    } catch (error) {
        console.error('Error loading image:', error);
    }
};
const handleConnectionChange = async () => {
    const connection = navigator.connection;
    let imageUrl;
    if (connection.effectiveType === 'wifi') {
        imageUrl = 'https://example.com/api/product - high - res - image';
    } else {
        imageUrl = 'https://example.com/api/product - low - res - image';
    }
    try {
        const response = await axios.get(imageUrl);
        productImageSrc.value = response.data;
        // 根据新的网络类型缓存相应画质的图片
        if (connection.effectiveType === 'wifi') {
            localStorage.setItem('product - high - res - image', response.data);
        } else {
            localStorage.setItem('product - low - res - image', response.data);
        }
    } catch (error) {
        console.error('Error re - loading image:', error);
    }
};
navigator.connection.addEventListener('change', handleConnectionChange);
loadProductImage();
</script>