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效果,这样更直观。最终完美解决。
     
     

  • 相关阅读:
    文件操作:根据现有类生成所需要的类
    Microsoft JScript 运行时错误: “”未定义
    未完成
    WPF模拟雷达界面效果图
    WebClient模拟网页提交表单
    201319
    Delphi中的InStrRev函数(倒找文本)
    利用IDhttp实现图片下载
    白话解释哈希表
    整理的Delphi常用字符串函数
  • 原文地址:https://www.cnblogs.com/changzz/p/14987579.html
Copyright © 2011-2022 走看看