大家好，
最近在写一个 userscript，要把每一个 img 都加上一个 canvas。
刚开始是用 jQuery("img").each 先 wrap div 再加入 canvas。搞定 position, padding
后还有一个问题，就是有时图片还没载完， width, height 是 0，则会造成图片跑掉。
jQuery("img").each((_, e) => {
jQuery(e).wrap(`<div style="position: relative; display: block; margin: 0px
auto; width: ${e.width}px!important; height: ${e.height}px!important;">`);
jQuery(e).after(`<canvas style="position: absolute; top: 0px; left: 0px;
width: ${e.width}px; height: ${e.height}px; padding-top: ${e.style.paddingTop};!important">`);
jQuery(e).css("margin-left","0px");
jQuery(e).css("margin-right","0px");
});
Google 一下应该要用 load 事件：
jQuery("img").load(() => {
jQuery(this).wrap(`<div style="position: relative; display: block; margin:
0px auto; width: ${this.width}px!important; height: ${this.height}px!important;">`);
jQuery(this).after(`<canvas style="position: absolute; top: 0px; left: 0px;
width: ${this.width}px; height: ${this.height}px; padding-top: ${this.style.paddingTop};!important">`);
jQuery(this).css("margin-left","0px");
jQuery(this).css("margin-right","0px");
});
却发现 jq 早就拿掉 load 惹，但就算改成：
jQuery("img").on("load", () => {
alert("");
jQuery(this).wrap(`<div style="position: relative; display: block; margin:
0px auto; width: ${this.width}px!important; height: ${this.height}px!important;">`);
jQuery(this).after(`<canvas style="position: absolute; top: 0px; left: 0px;
width: ${this.width}px; height: ${this.height}px; padding-top: ${this.style.paddingTop};!important">`);
jQuery(this).css("margin-left","0px");
jQuery(this).css("margin-right","0px");
});
非但没做任何事，甚至连 alert 都没出现！我记得我今天在乱试中有成功过 R！现在完全
没有头绪，请各位大大不吝给予意见指教！
P.S. 如我这般欲将每一 img 加上 canvas，倘若遇到后来 ajax 才加载之图片要怎么办？
再监听一个 scroll 事件感觉很浪费资源