JavaScript Basics

Load an image reliablely.

In this post, an image is loaded reliablely.

1. the pictureElement is used to ensure that an image is loaded; several source image urls are given with a backup imgElement src url. If the two source element urls are not loaded, then the imgElement src url is loaded.

<!DOCTYPE>
<html>
<head></head>
<body>
<div class="javascript_css"></div>
<script>
function picture_element(source_url0, source_url1, backup_url) {
  
  var pictureElement = document.createElement("picture");
  pictureElement.setAttribute("id", "picture0");
  pictureElement.setAttribute("class", "picture_simple");
  pictureElement.setAttribute("onclick", "processEvent_click()");
  pictureElement.style.position = "absolute";
  pictureElement.style.top = "60px";
  document.getElementsByClassName("javascript_css")[0].appendChild(pictureElement);
  
  var sourceElement = document.createElement("source");
  sourceElement.setAttribute("id", "source0");
  sourceElement.setAttribute("class", "source_simple");
  sourceElement.srcset = source_url0; 
  pictureElement.appendChild(sourceElement);
  
  var sourceElement = document.createElement("source");
  sourceElement.setAttribute("id", "source1");
  sourceElement.setAttribute("class", "source_simple");
  sourceElement.srcset = source_url1; 
  pictureElement.appendChild(sourceElement);
  
  var imgElement = document.createElement("img");
  imgElement.setAttribute("id", "img0");
  imgElement.setAttribute("class", "img_simple");
  imgElement.style.width = "100px";
  imgElement.style.height = "100px";
  imgElement.style.border = "1px solid gray";
  imgElement.style.borderRadius = "1px";
  imgElement.src = backup_url;
  pictureElement.appendChild(imgElement);
  
}

function processEvent_click() {

  window.location.href = window.location.href + '?nocache=' + new Date().getTime();
  document.getElementsByClassName("javascript_css")[0].innerHTML += "refreshed. "
}
  
</script>
<script>
topbar();

function topbar() {

  document.getElementsByClassName("javascript_css")[0].style.position = "absolute";
  document.getElementsByClassName("javascript_css")[0].style.width = "300px";
  document.getElementsByClassName("javascript_css")[0].style.height = "50px";
  document.getElementsByClassName("javascript_css")[0].style.border = "1px solid gray";
  document.getElementsByClassName("javascript_css")[0].style.borderRadius = "2px";
  document.getElementsByClassName("javascript_css")[0].innerHTML = "Image display.";

  const backup_url = "https://d08eefae-9919-4748-b896-7353f6b11435.mdnplay.dev/shared-assets/images/examples/grapefruit-slice.jpg";  
  const source_url0 = "https://82b65eeb-34c6-4699-9ada-3cd06abeed1f.mdnplay.dev/shared-assets/images/examples/painted-hand.jpg";
  const source_url1 = "https://acec906b-e71d-4463-97bf-810f8883507f.mdnplay.dev/shared-assets/images/examples/balloon-small.jpg";
  picture_element(source_url0, source_url1, backup_url);
}
</script>
</body>
</html>

Good Luck with your workflows and Happy Practicing! 👋

Get Practicing DatScy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

🔔 Practicing Datscy @ Medium | 🌷 Practicing Datscy @ Dev.to