HTML DOM Element - image

忘了是去年还是前年写了一个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,发现是非常基础的知识,这种时候就觉得自己基础实在是太差了…☹

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

image.onload

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

image.onerror

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

1
2
3
4
5
6
// 继续上面的例子
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