作者nevikw39 (☆牜攵☆犬羊)
看板Web_Design
标题[问题] jQuery 图片 load 事件
时间Tue Jun 18 00:16:07 2019
大家好，
最近在写一个 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 事件感觉很浪费资源
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 106.107.240.213 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1560788171.A.E4A.html
1F：推 LoveMoon: 1.load() still works;2.change ()=>{} to function(){} 06/18 20:08
2F：→ LoveMoon: be sure that the "this" keyword refers to right obj 06/18 20:09
3F：→ LoveMoon: u should know all the cods u write 06/18 20:11
研究惹一番，终於 OK 喇
let mo = new MutationObserver(i => {
$("img").each((_, e) => {
if (e.width && e.height)
$(e).wrap(`<div style="position: relative; display: block; margin:
0px auto;>`)
.after(`<canvas style="position: absolute; top: 0px; left: 0px; width: ${e.width}px; height: ${e.height}px; padding-top: ${e.style.paddingTop};!important">`)
.css("margin-left","0px")
.css("margin-right","0px");
else
e.onload += () => {
$(this).wrap(`<div style="position: relative; display: block;
margin: 0px auto;">`)
.after(`<canvas style="position: absolute; top: 0px; left: 0px; width: ${this.width}px; height: ${this.height}px; padding-top: ${this.style.paddingTop};!important">`)
.css("margin-left","0px")
.css("margin-right","0px");
};
});
});
mo.observe(document, {subtree: true, childList: true});
※ 编辑: nevikw39 (106.107.240.213 台湾), 06/18/2019 22:35:28