Answers for "upload photos and preload images javascript"

javascript preload images

/* 
  Standards friendly image preloading
  Generates `<link rel="preload" as="image" href="important_image.png">`
  Ref: https://web.dev/preload-responsive-images/#preload-overview
*/
 
function preloadImages(images) {
  for (i = 0; i < images.length; i++) {
    let l = document.createElement('link')
    l.rel = 'preload'
    l.as = 'image'
    l.href = images[i]
    document.head.appendChild(l)
  }
}

// Usage:
imageUrlHeap = ['http://example.com/test/img-1.jpg','http://example.com/test/img-2.jpg','http://example.com/test/img-3.jpg'];
preloadImages(imageUrlHeap);

preview image file upload javascript

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>