zoukankan      html  css  js  c++  java
  • 记一次ios下h5页面图片显示问题

      刚入职公司时做了一个移动端上传图片并可以预览的组件,之前也有业务组用过,没发现什么问题,但是这次出现了两个很诡异的问题。
      一个是有个老数据的图在ios下不显示,另一个是图片点击预览只显示一部分加载不全。之所以诡异是所有设备都没问题就ios下有问题,其中老数据图不显示还是ios系统版本13及以下才有的。被这个问题困扰了好几天,经过一系列艰难排查最终两个问题都妥善解决。
     
    第一个问题原因是该图是webp格式的,伪装成了jpg格式(后缀为.jpg)。然而ios13及以下是不支持webp格式的文件的,所以图片显示空白。
    第二个问题是这次接口返回的图片url是在浏览器打开直接下载的,而之前是在浏览器直接显示的,我在预览组件里用了loading效果,new 了一个Image对象,赋值url监听onload事件,然后去除loading再渲染img标签并给src赋值。这样导致一个问题就是一张图片在极短时间里会被加载两次。而这次的图片url又是可以直接下载图片的,所以ios系统为了节流在第二次img加载图片时判定重复加载从而终止请求导致图片只显示一部分。最后解决方案是把new Image的步骤去掉了,直接赋值给img标签,然后监听img标签的onload事件来判断loading效果,这样更直观。最终完美解决。
     
     

  • 相关阅读:
    智能聊天机器人——基于RASA搭建
    十分钟学会写shell脚本
    浅谈并发并行异步同步
    C/S系统实现两数求和(非阻塞+epoll+心跳包检测用户在线状况+滚动日志+配置文件.)
    编程之美第一篇 01分数规划
    欧拉函数
    奇妙的算法之LCS妙解
    N种方法妙讲LIS算法
    基于FeignClient提供简单的用户查询服务
    SpringCloud简介
  • 原文地址:https://www.cnblogs.com/changzz/p/14987579.html
Copyright © 2011-2022 走看看