<!DOCTYPE html>
<html>
<body>
<script>
loaded_ids = new Array();
</script>
In the viewport images <br>
<img id="atf_auto" src="images/fruit1.jpg?auto"
onload="loaded_ids.push(this.id); console.log(this.id);">
<img id="atf_lazy" src="images/fruit1.jpg?lazy" loading="lazy"
onload="loaded_ids.push(this.id); console.log(this.id);">
<img id="atf_eager" src="images/fruit1.jpg?eager" loading="eager"
onload="loaded_ids.push(this.id); console.log(this.id);">
<div style="height:11000px;"></div>
Below the viewport images <br>
<img id="btf_auto" src="images/fruit2.jpg?auto"
onload="loaded_ids.push(this.id); console.log(this.id);">
<img id="btf_lazy" src="images/fruit2.jpg?lazy" loading="lazy"
onload="loaded_ids.push(this.id); console.log(this.id);">
<img id="btf_eager" src="images/fruit2.jpg?eager" loading="eager"
onload="loaded_ids.push(this.id); console.log(this.id);">
</body>
</html>