I'm getting duplicated calls for a resource when it's added through a script as an image using jsdom and node-canvas.
I believe there's some kind of interaction between jsdom and canvas that performs the call to that endpoint twice, I don't know if someone can help me to configure this properly but I need only one call.
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const options = {
runScripts: "dangerously",
url: `https://localhost:8800`,
resources: "usable"
};
new JSDOM(`
<html>
<head><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script></head>
<body>
<div id="my_img"></div>
<script>
var src_img = document.getElementById("my_img");
var testimg = document.createElement("img");
testimg.src = "https://revistahsm.com/wp-content/uploads/2018/08/Fiestas.png"; // example img
testimg.width = 0;
testimg.height = 0;
src_img.appendChild(testimg);
</script>
</body>
</html>
`, options);
I asume it has to do with the resizing of the image, "after" it has be loaded. Maybe because of a "redraw", or so. (the browser canvas does this, if I remember correct). I just tested this theory, so if you reorder some lines like this
...
testimg.width = 0;
testimg.height = 0;
testimg.src = "http://localhost:8080/Fiestas.png"; // example img
src_img.appendChild(testimg);
...
the image should be loaded only once. I just tried it, and it worked, but I don't have documentation or Code prove, yet. Will Update the answer if/when I find the prove to this (working)-theory.