‘multipart/x-mixed-replace‘ http 响应在不再需要时关闭单个 img标签视频流

控制Vue组件中单个img标签的动态加载策略

原创已于 2023-10-10 16:20:55 修改 · 756 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#http #网络协议 #网络 #前端 #vue #javascript

于 2023-10-10 14:55:50 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

文章介绍了在Vue组件中使用图片流时，如何通过`window.stop()`方法停止所有静态资源加载，以及如何利用`iframe`和`srcdoc`属性实现单个img标签的加载控制。

<template>
  <div v-loading="loading" class="flv-item" :class="{ 'full-screen': isFullScreen }" @dblclick="fullScreen">
    <template v-if="url !== ''">
      <div class="title-line">
        <span class="title">{{ title }}</span>
      </div>
      <img v-if="imgShow" id="img-video" :src="imgUrl" class="video img-a" alt="获取图片失败" @error="imgerrorfun()" @click="closeImg" />
    </template>
  </div>
</template>

对于组件中的img标签的链接我们用的是图片流的方式：url不变图片在不断的改变

对于这类img标签想要停止加载图片首先会想到v-if 但是事实是不可行

后面找到了一个办法 window.stop()方法这个方法是停止所有的静态资源的加载会停止所有的img标签的加载，但是如果我们想要停止单个img标签的加载这个方法就不行

// 跳出当前页面，停止浏览器的资源加载
  window.stop();

如果想停止单个的img标签就要用到iframe标签

就是在我们的html界面中嵌套另一个html界面将单个img标签嵌套在这个iframe的html里面

<template>
  <div style="width: 100%; height: 100%">
    <iframe :id="`iframeContainer${imgUrl}`" src="" width="100%" height="100%" :srcdoc="imgHtml" frameborder="0"></iframe>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs, onMounted, onUpdated } from 'vue';
const props = defineProps<{ imgUrl: string }>();
const { imgUrl } = toRefs(props);
const emits = defineEmits<{ (e: 'full-screen'): void }>();
const imgHtml = computed(() => {
  return `
      <html>
        <head>
          <style>
            html,
            body,
            img {
              margin: 0;
              padding: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
            }
          </style>
        </head>
        <body>
          <img src="${imgUrl.value}" />
        </body>
      </html>
      `;
});
</script>

如果想停止这个img标签我们把这个iframe用v-if不让他显示资源就不会加载了