可以使用Vue.js和Intersection Observer API来实现延迟加载图片,以提高页面性能。以下是一个简单的示例:
<template> <div> <img ref="image" :src="placeholder" alt="Placeholder Image" @load="onImageLoad" /> </div> </template> <script> export default { props: { src: { type: String, required: true, // 图片的真实来源 }, placeholder: { type: String, required: true, // 占位图片,可以是模糊或低分辨率的图像 }, }, data() { return { imageLoaded: false, }; }, methods: { onImageLoad() { this.imageLoaded = true; }, }, mounted() { const options = { root: null, // 使用viewport作为根元素 rootMargin: '0px', threshold: 0.1, // 图片10%可见时加载 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { // 图片进入可视区域时加载真实图片 this.$refs.image.src = this.src; observer.unobserve(this.$refs.image); // 停止观察 } }); }, options); observer.observe(this.$refs.image); }, }; </script> <style scoped> /* 添加样式以控制占位图像和加载后的图像 */ div { position: relative; width: 100%; } img { width: 100%; height: auto; transition: opacity 0.3s ease-in-out; } /* 图片加载前的样式,可以是占位图像的样式 */ img:not(.loaded) { opacity: 0; } /* 图片加载后的样式 */ img.loaded { opacity: 1; } </style>
这个组件的关键点是使用Intersection Observer API来观察图片是否进入了可视区域。当图片10%可见时,它会加载真实的图片,而不是一开始就加载。这种方式可以显著提高页面性能,特别是在有大量图片需要加载时。
使用方法:<template> <div> <ProgressiveImage src="真实图片的URL" placeholder="占位图片的URL" /> </div> </template> <script> import ProgressiveImage from './ProgressiveImage.vue'; // 引入组件 export default { components: { ProgressiveImage, // 注册组件 }, }; </script>这样,您就可以在Vue项目中使用渐进式图片加载组件了。这个组件会在用户滚动到图片位置时加载真实图片,以提高性能和用户体验。
网友回复
腾讯混元模型广场里都是混元模型的垂直小模型,如何api调用?
为啥所有的照片分辨率提升工具都会修改照片上的图案细节?
js如何在浏览器中将webm视频的声音分离为单独音频?
微信小程序如何播放第三方域名url的mp4视频?
ai多模态大模型能实时识别视频中的手语为文字吗?
如何远程调试别人的chrome浏览器获取调试信息?
为啥js打开新网页window.open设置窗口宽高无效?
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音?
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载?
python如何直接获取抖音短视频的音频文件url?