HTML DOM Element - image #43

忘了是去年还是前年写了一个 urbtix 抢演唱会票的 chrome 小插件 https://github.com/sabrinaluo/urbtix-helper （每次都进不去网站，一次都没抢到 😂），逻辑其实很简单，就是当用户设置了event_id perfomence_id seat_type ticket_amount之后，凡是自动点击的就由程序自动点击，以加快整个购票过程。

为了让界面和用户体验更好，所以在界面加了一个图片，来展示对应的演唱会海报（海报是通过 urbtix 的 url 扒来的，e.g. https://ticket.urbtix.hk/internet/p_image/cover/34505.jpg ）。一直以来 urbtix 都是用.jpg图片文件，今天忽然发现，他们居然有些图片是.jpeg的 🙄

于是问题就来了，如果不爬取 urbtix 的 html 是无法知道正确的图片格式的，所以一个代替的方案是，在.jpg下载失败时尝试使用.jpeg来下载，这就涉及到怎么检测图片是否加载成功…

搜了一下 google，发现是非常基础的知识，这种时候就觉得自己基础实在是太差了…☹

var image = new Image();
// 相当于 document.createElement('img')

image.onload

当图片加载完成时，触发 image.onload

image.onerror

当图片加载出现错误时，触发 image.onerror

// 继续上面的例子
image.onload = function () {
  console.log('ok');
};
image.onerror = function () {
  console.log('error');
};
image.src = 'https://ticket.urbtix.hk/internet/p_image/cover/34505.jpg';
// → 'error'

以上，就是辣么简单啦。

Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/image