js加载css判断是否加载完成兼容性(模拟onload)

498 阅读1分钟

按最新浏览器可以用onload和onerror监听link标签。

兼容性如下

up-e7c0960a60d9c477ce9ccebc58738a89994.webp

由表可以看出

  1. IE系列,无论成功还是失败都走onload;
  2. 火狐低版本不会触发onload、onerror事件,但是可以使用in来判断是否支持;
  3. Chrome低版本不会触发onload、onerror事件,且无法判断是否支持;

IE系列onload后可以通过styleSheet.rules判断失败

火狐低版in来判断

Chrome低版比较麻烦,先用一个data url的CSS来响应onload事件,来判断是否支持,如果不支持,用setTimeout循环检查document.styleSheets来判断