Skip to content

Instantly share code, notes, and snippets.

@inian

inian/async-decoding.html

Last active June 13, 2019 12:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save inian/8d888f9d278444d62f40dee90bfdd0a0 to your computer and use it in GitHub Desktop.
Save inian/8d888f9d278444d62f40dee90bfdd0a0 to your computer and use it in GitHub Desktop.
Download ZIP
Image decoding
Raw
async-decoding.html
<html>
<body>
<div class="jank-detector">
Random numbers, to highlight jank:
<span class="rand"></span>
</div>
<script>
const rand = document.querySelector(".rand");
function randFrame() {
rand.textContent = Math.random();
requestAnimationFrame(randFrame);
}
randFrame();
</script>
<script>
function onload1() {
setTimeout(() => {
const img = new Image();
img.width = 1400;
img.decoding = "async";
img.src = `https://res.cloudinary.com/demo/image/upload/f_auto,w_6400/q_1/string_1.jpg?${Date.now()}`;
img.onload = () => {
const orig = document.getElementById("orig");
orig.parentElement.replaceChild(img, orig);
};
}, 3000);
}
</script>
<div id="sdf"></div>
<img
id="orig"
width="1400"
onload="onload1()"
src="https://res.cloudinary.com/demo/image/upload/e_blur:1000,w_6400/q_1/string_1.jpg"
/>
<br />
</body>
</html>
Raw
sync-decoding.html
<html>
<body>
<div class="jank-detector">
Random numbers, to highlight jank:
<span class="rand"></span>
</div>
<script>
const rand = document.querySelector(".rand");
function randFrame() {
rand.textContent = Math.random();
requestAnimationFrame(randFrame);
}
randFrame();
</script>
<script>
function onload1() {
setTimeout(() => {
console.log("start");
const img = new Image();
img.width = 1400;
img.decoding = "sync";
img.src = `https://res.cloudinary.com/demo/image/upload/f_auto,w_6400/q_1/string_1.jpg?${Date.now()}`;
img.onload = () => {
const orig = document.getElementById("orig");
orig.parentElement.replaceChild(img, orig);
};
}
</script>
<div id="sdf"></div>
<img
id="orig"
width="1400"
onload="onload1()"
src="https://res.cloudinary.com/demo/image/upload/e_blur:1000,w_6400/q_1/string_1.jpg"
/>
<br />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment