JavaScript
Image Loader
Image Loader
<!DOCTYPE html>
<html>
<head>
<style>
.myImgClass{
border:none;
width:100%;}
.myLink{
cursor:pointer;}
</style>
</head>
<body>
<div id="link1_id" class="myLink">Fai click qui per immagine 1</div>
<div id="link2_id" class="myLink">Fai click qui per immagine 2</div>
<div id="clear_id" class="myLink">Fai click qui per cancellare</div>
<div id="img_container"></div>
<script>
let myImg = new Image();
function fnct_img_onload()
{
document.getElementById("img_container").innerHTML = "<img src='"+myImg.src+"' class='myImgClass'>";
}
function fnct_img_preload(myImgSrc)
{
document.getElementById("img_container").innerHTML = "Caricamento in corso..."//or something else..;
myImg.src=myImgSrc;
if(myImg.complete)
{
fnct_img_onload();
}
else
{
myImg.addEventListener("load",fnct_img_onload);
}
}
function fnct_clear()
{
document.getElementById("img_container").innerHTML="";
}
document.getElementById("link1_id").addEventListener("click", function(){fnct_img_preload("img/img1.jpg")});
document.getElementById("link2_id").addEventListener("click", function(){fnct_img_preload("img/img2.jpg")});
document.getElementById("clear_id").addEventListener("click", fnct_clear);
</script>
</body>
</html>