学校网站怎么做的好坏,浙江网架公司,网站开发工单,网站制做工具v-viewer简介 v-viewer 是一个 Vue 组件#xff0c;用于显示图片和其他媒体内容的全屏查看器。它基于 Viewer.js#xff0c;一个强大的图片查看库。 以下是一个基本的使用示例#xff1a; templatediv v-viewerimg srcimage1.jpg /用于显示图片和其他媒体内容的全屏查看器。它基于 Viewer.js一个强大的图片查看库。 以下是一个基本的使用示例 templatediv v-viewerimg srcimage1.jpg /img srcimage2.jpg /img srcimage3.jpg //div /templatescript import Viewer from v-viewer import viewerjs/dist/viewer.cssexport default {name: MyComponent,directives: {viewer: Viewer},data() {return {viewerOptions: {inline: false,button: true,navbar: true,title: true,toolbar: true,tooltip: true,movable: true,zoomable: true,rotatable: true,scalable: true,transition: true,fullscreen: true,keyboard: true,url: data-source}}} } /script在这个示例中我们导入了 v-viewer 和相关的 CSS然后在模板中使用 v-viewer 指令。每个 img 元素都会自动成为查看器的目标。 v-viewer 提供了许多选项如 inline、button、navbar、title、toolbar 等用于自定义查看器的行为和外观。你可以在 viewerOptions 对象中设置这些选项。 更多详细的信息你可以查看 v-viewer 的 GitHub 页面。 问题及解决方案 改插件能够很方方便的用来进行图片的预览放大缩小等各种操作。然而在实际使用中有用户反馈图片加载很慢的问题希望能对此进行优化。 图片尺寸大 针对此种情况我们首先针对用户反应的情况进行了排查发现用户上传的图片很大一般在5-7M左右。这种情况通常发生在用户手机端上传由于现代手机都具有较高的拍照像素所以通常而言图片会很大。 于是首先我们对图片进行了压缩上传尽可能降低图片的大小用以提升用户预览体验。 多次重复加载 在上面进行了压缩上传以后一段时间后用户还是反馈图片预览慢。此时我们就排查了下预览时前端的网络请求耗时等发现v-viewer在对同一张图片预览时加载了3次直到3次下载完成后图片预览才算完成。这就相当于用时是正常预期的3倍。 这里就需要查看dom看看为什么加载了3次。dom结构如下 这3处dom都包含了同一图片分别为渲染前的原始dom节点v-viewer渲染的大图预览以及隐藏的小图navbar。由此可以看到即便我们没有启用小图索引dom结构中依然有只是隐藏了而已。这就导致造成额外的网络请求及加载延时问题。 项目中使用v-viewer的代码如下 templatediv v-loadingimgLoading v-viewer.rebuild{ ...imgViewerConfig } classimage-previewimg loadimgLoading false :srcfileUrl stylevisibility: hidden //div /templatev-viewer对应的config配置 imgViewerConfig {inline: true,button: false,navbar: false,title: false,fullscreen: true,toolbar: {prev: 0,next: 0,zoomIn: 1,zoomOut: 1,oneToOne: 1,reset: 1,play: 0,rotateLeft: 1,rotateRight: 1,flipHorizontal: 1,flipVertical: 1}}优化的思路就是尽可能只加载一次图片。如何在不改组件的情况下实现该目标呢 解决方案如果我们先通过异步请求主动加载一次图片将图片保存在内存中后续v-viewer组件加载内存中的图片就可以极大地提升图片预览的速度。避免不必要的网络请求。 async function loadFileBlobLink(url: string) {const response await fetchBlobPart(GET, url, {}, true)const blob new Blob([response.data])const link window.URL.createObjectURL(blob)return link }我们通过createObjectURL创建一个URL用于访问异步接口请求到的文件流数据。URL.createObjectURL() 是一个静态方法用于创建一个 DOMString其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期与创建它的窗口中的 document 绑定。新的对象 URL 表示指定的 File 对象或 Blob 对象。 可以通过在chrome地址栏中访问chrome://blob-internals/查看chrome中blob的存储占用 请注意由 URL.createObjectURL() 创建的 URL 应当在不再需要时释放以便浏览器可以回收任何消耗的资源。这可以通过调用 URL.revokeObjectURL() 来完成 URL.revokeObjectURL(url);总结 通过转换图片的加载方式异步下载图片文件流并通过createObjectURL创建url引用可以有效提升v-viewer预览图片的加载速度。在已经尝试过其他优化方案图片压缩提升网络带宽等后该方案也是进一步提升性能的可行方案。