前端监听资源加载错误


前言

页面上有很多资源元素,比如<img>,<iframe>等,我们需要知道其加载情况,根据加载成功与否进行下一步的处理。

常见的做法是给这些元素上设置onload,onerror方法。

比如:<img onerror="errFn()" onload="loadFn()">

支持onload的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

支持onerror的标签:<img>, <input type="image">, <object>, <script>, <style> , <audio>, <video>

注意IE9.0及以上才支持<audio>, <video>标签

此外几乎所有浏览器都支持onloadonerror,

这种做法的缺点:

  1. 每个要处理的元素都要绑定事件,html和js耦合太深,处理的脚本不能通用化、插件化,比如给另一个页面也能方便使用
  2. Windows 7 下的 Internet Explorer 11 不支持<audio>, <video>的 onerror 事件(我没试过。


flv格式说明


总体结构

说明:举例 表示值为不固定,仅举例一个符合取值范围的值 本文md解析有问题,附上文档md源码

  • Header[9B]
    • Signature[3B]:文件标识,固定FLV三个字符(0x464C56)
    • Version[1B]:FLV版本号
    • Flags[1B]:第0位和第2位分别表示video与audio的存在情况(1存在0不存在);0x05表示都存在
    • DataOffset[4B]:表示FLV的Header长度,固定为0x00000009(个人感觉这边可以改进