移动端h5图片加载问题，预加载、div标签替换img

最新推荐文章于 2023-03-15 14:29:43 发布

莉兹Liz

最新推荐文章于 2023-03-15 14:29:43 发布

阅读量1.6k

点赞数

分类专栏： Vue 文章标签： css css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_40138556/article/details/121992367

版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在移动端H5开发中遇到的图片加载问题及其解决方案。针对大图片，采用预加载(reload)技术提高加载速度；对于小图片，通过将div标签替换为img标签来优化显示。同时，针对特殊场景如按钮点击动效，讨论了代码修改方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发移动端h5时遇到图片加载不出来的问题，分为大图片和小图片（打包base64区分）
大图片加载解决办法：reload预加载
小图片加载解决办法：div标签替换为img标签

特殊情况：
div标签按钮有点击动效，即按下按钮时active替换为另一张图片
原代码：

// html
	<div
        :src="startBtn"
        @click="startGame"
        class="game-btn"
        @touchstart="" // 解决iOS上active动效不生效问题
      ><div/>

// css
    .game-btn {
      position: absolute;
      width: 180px;
      height: 180px;
      margin-top: 280px;
      background: url("../../imgs/game-start-btn.png") no-repeat center/contain;
      &:active {
        background-image: url("../../imgs/game-start-btn-on.png");
      }
    }

改后：

// html
	<img
        :src="startBtn"
        @click="startGame"
        class="game-btn"
        @touchstart="startBtnChange('start')"
        @touchend="startBtnChange('end')"
      />
// data
	  startBtn: require("../../imgs/game-start-btn.png"),
      btnUrls: {
        start: require("../../imgs/game-start-btn-on.png"),
        end: require("../../imgs/game-start-btn.png"),
      },
      
// js
	startBtnChange(val) {
      this.startBtn = this.btnUrls[val];
    },

// css
    .game-btn {
      position: absolute;
      width: 180px;
      height: 180px;
      margin-top: 280px;
    }