HTML, how to set multiple src attributes for image in parallel, fastest win

Question

I want to asynchronously download image, so first user sees a low resolution image, and higher resolution version is downloaded in the background. I have tried the following.

<html>
    <head>
        <script>
            window.addEventListener('load', function () {
                var kuvaEl = document.getElementById('kuva');

                var r_src = kuvaEl.getAttribute('r-src');
                var a_src = kuvaEl.getAttribute('a-src');

                kuvaEl.setAttribute('src', r_src);
                kuvaEl.setAttribute('src', a_src);
            });
        </script>
    </head>
    <body>
        <img id="kuva" src="http://www.viikonloppu.com/wp-content/uploads/2014/04/lotoflaughters.com_-619x428.jpg?c3bc1b"
            a-src="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg"
            r-src="http://fuzyll.com/images/2016/angel_oak_panorama.jpg" />
    </body>
</html>

But the problem is r_src download is aborted when src is change second time. I want to download both of these images in parallel, and show the r_src first (only if it downloads faster than a_src), and when the *a_src *is ready, show the a_src.

Also, is it possible to download these a_src and r_src images to the browser cache before the src is actually changed? Ideally I would like the the src change to either retrieve the image from the cache or join the pending download for that url.

I can also use jQuery. IE7 must support the implementation.

Have you try using AJAX? Load image with src of the lower resolution and then with AJAX load higher resolution image, and replace image src value. — Andrzej Gorgoń, Oct 11 '17 at 07:57
Using three images seems a little overkill, and probably ends up being much slower. You could try [this approach](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/) which is what Facebook uses. — Rory McCrossan, Oct 11 '17 at 07:59
The reason using three images is, there are small images which are always low res. Clicking the small image will update the big image first as low res, and high res when available. The example code doesn't follow this logic, it is just a test — Tuomas Toivonen, Oct 11 '17 at 08:09

score 1 · Answer 1 · answered Oct 11 '17 at 08:01

You just need to use javascript or jquery and load two version of the same image. the first will be your low res, but you will download a high res inside an hidden img tag.

When the download is complete, you just hide / delete the low res image and show the high res.

This link show some test and few way to do it. And it should support ie7 Load a low-res background image first, then a high-res one

Apolo · Answer 2 · 2017-10-11T08:19:56.847

You should put your low res as default src. Then use JS to download the high res version and on download completion, change image src.

Also, good practice is to use data-* for custom attributes

If your really want a parallel download, you should replace "load" event for the "DOMContentLoaded" event. However, this will extend the time your user has to wait until page is ready. Your should keep the load event to prioritize critical assets loading (scripts and stylesheets)

window.addEventListener('load', function() {
  // get all images
  let images = document.getElementsByClassName("toHighRes");
  // for each images, do the background loading
  for (let i = 0; i < images.length; i++) {
    InitHighResLoading(images[i]);
  }
});

function InitHighResLoading(image) {
  let hrSrc = image.dataset["hr"];
  let img = new Image();
  img.onload = () => {
    // callback when image is loaded
    image.src = hrSrc;
  }
  // launch download
  img.src = hrSrc;
}

img {
/* only for code snippet */
  max-height: 300px;
}

<img class="toHighRes" 
    data-hr="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" 
    src="http://fuzyll.com/images/2016/angel_oak_panorama.jpg" />

score 0 · Answer 3 · answered Oct 11 '17 at 08:10

You can use interlaced progressive JPEG format.

This method is the preferred method for handling high quality images and has been implemented by so many websites.the idea is that the compression of the image is made in such away that the when you send the image the receiver gets the image in finer and finer detail has the sending of the data progressed.

if you dont want to use the abouve technique

Have the low quality image in the src of the image. once the whole page loaded successfully,change the low quality image with high quality image

<img id="target-image" src="low-quality.jpg" data-src="high-quality.jpg" /> 

$(window).load(function(){
  var imgSrc = $('#target-image').data('src');
  $('#target-image').attr('src',imgSrc);
});

HTML, how to set multiple src attributes for image in parallel, fastest win

3 Answers3