网不好的情况下图片从上到下断断续续的渲染怎么解决？

Question

网不好的情况下图片从上到下断断续续的渲染怎么解决？

Answer 1

1. 使用图片替换的形式，社区有一个类似的问答 👉 pc端新版知乎的这个图片加载是怎么做的？
2. 使用缩略图，列表页展示缩略图，预览放大或者进入详情页面时再请求原图/大图。
3. 使用渐进式图片资源 👉 渐进式jpeg(progressive jpeg)图片及其相关

Answer 2

1、首先保证图片的大小，不要太大，做压缩，可以去这里压缩，https://tinypng.com/
2、可以使用预加载图片，可以避免这种问题

Answer 3

解决图片从上到下断断续续渲染的问题
在网络状况不佳的情况下，图片从上至下不连续渲染的问题可以通过以下几种前端技术手段来解决，这些方法在Vue.js及其他现代前端框架中均可应用：

1. 渐进式JPEG图片
   渐进式JPEG（Progressive JPEG）允许浏览器逐步加载图片，首先显示低分辨率的模糊版本，随着数据加载增多，图片逐渐变得更加清晰。

2. 图片懒加载（Lazy Loading）
   使用Vue.js的懒加载库，如vue-lazyload，可以等到图片滚动到视口中再开始加载：

     <!-- Vue Lazy Load 示例 -->
     <img v-lazy="'your-image-url.jpg'" alt="Image description" />

3. 占位符（Placeholder）
   在真实图片加载前，设置一个占位符图片或背景颜色，当真实图片加载完成时替换占位符。可通过CSS过渡或Vue.js的条件渲染以及@load事件实现平滑过渡：

  <template>
    <div :style="{backgroundImage: loaded ? 'url(real-image.jpg)' : 'url(placeholder-image.jpg)'}">
      <img v-if="loaded" @load="onImageLoad" :src="realImageUrl" alt="Image description" style="opacity: 0; transition: opacity .5s ease-in-out;" />
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        loaded: false,
        realImageUrl: 'real-image.jpg',
      };
    },
    methods: {
      onImageLoad() {
        this.loaded = true;
        this.$nextTick(() => {
          this.$el.querySelector('img').style.opacity = 1;
        });
      },
    },
  };
  </script>

4. 响应式图片（Responsive Images）
   根据设备屏幕尺寸和网络状况，提供不同分辨率的图片资源，可使用HTML5的srcset和sizes属性：

     <img srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w"
       sizes="(max-width: 600px) 100vw, 50vw"
       src="image-640w.jpg" alt="Image description" />

5. 预加载（Preloading）
   对于关键图片，可以使用HTML的link标签进行预加载，使它们在网络不稳定时优先加载：

     <link rel="preload" href="critical-image.jpg" as="image" />