28:null 29:["$","title",null,{"children":"Iframe and Load Event | Sylvain Lesage | Observable"}] 2e:[{"id":"049d28b90a46079a7017946b2c23b9f8530d4e2d9cc49aa50c9b509067e24819af275341d5935584817c940946c5dea050d0826a9350a2aa657aa397a7581e42","href":"https://static.observableusercontent.com/files/049d28b90a46079a7017946b2c23b9f8530d4e2d9cc49aa50c9b509067e24819af275341d5935584817c940946c5dea050d0826a9350a2aa657aa397a7581e42","name":"049d28b90a46079a7017946b2c23b9f8530d4e2d9cc49aa50c9b509067e24819af275341d5935584817c940946c5dea050d0826a9350a2aa657aa397a7581e42.jpeg","type":"image/jpeg","lastModified":1599931744234.486,"size":73554}] 2c:{"id":"c2d94f582418400f","slug":"iframe-and-load-event","title":"Iframe and Load Event","thumbnail":"21c6b9a88038be37af1496ff7086e66d367149278fde75951ef0a1a9c6dcb853","access_level":"public","create_time":"$D2020-09-12T17:25:19.121Z","update_time":"$D2021-03-12T00:04:42.683Z","view_time":null,"first_public_time":"$D2020-09-12T20:05:55.213Z","has_unpublished_edits":null,"fork":{"id":"b2654cb92e1036d3","slug":"holy-grail-layout","title":"Holy Grail Layout","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":1870,"publish_version":1870,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bc90794967de2d70","slug":"support-bugs","title":"Support / bugs","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"Iframe and Load Event","cells":[{"id":0,"value":"md`# Iframe and Load Event\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"md`It's common to await for an HTMLImageElement \\`load\\` event before using it, in order to have access to all its \"final\" properties, such as the width, height, etc.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1511,"value":"// From https://observablehq.com/@mbostock/file-input\nfunction getLoadedImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = src;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1502,"value":"getLoadedImage(imgSrc)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"md`But the same strategy cannot be used on an HTMLIFrameElement, because it lacks a constructor and IIRC it can only be created through the \\`