2

I am currently researching better ways to accomplish pre-loading of images and thought perhaps using web workers would be a more ideal way. However, I am not sure that it is. Is there any specific benefit in terms of performance and user experience using background workers versus classic-style pre-loading? Which is better?

function preloadBackground(a) {
    new d(window.URL.createObjectURL(
            new Blob([
            "(function () {" +
                "var x = new XMLHttpRequest();" +
                "x.responseType = 'blob';" +
                "x.open('GET', '" + a + "', true);" +
                "x.send();" +
            "}());\n"], { type: "text/javascript" })
            )
        )
}

function preloadClassic(a) {
    var i = new Image();
    i.src = a;
}
Joshua Dannemann
  • 2,003
  • 1
  • 14
  • 34
  • it gets it off the main thread. – Daniel A. White Dec 11 '15 at 21:08
  • Yes, but with the classic means of pre-loading, doesn't the browser also load the images in the background? I was thinking that so long as there is no callback function with the onload event, that the two methods are roughly equivalent in terms of performance. Please correct me if I am wrong. – Joshua Dannemann Dec 11 '15 at 21:10
  • 1
    Only one surefire way to know, test it out. My hunch would be that the worker will be significantly slower. I'm pretty sure browsers are optimised to hell for images. – Matt Styles Dec 11 '15 at 21:12
  • I could see it being faster or slower or not significantly different at all. You should set up a test and see which way is faster. – NoobsArePeople2 Dec 11 '15 at 21:12
  • Why are you loading the image as a Blob object with XHR? A simple Image object should be sufficient. – 11thdimension Dec 11 '15 at 21:25
  • That's what I thought too, but at least in Chrome, the Image type doesn't seem to available in the worker thread. – Joshua Dannemann Dec 11 '15 at 21:31
  • 1
    I never realized that. Here's the link to the things available to workers https://html.spec.whatwg.org/multipage/workers.html#apis-available-to-workers – 11thdimension Dec 11 '15 at 21:48

1 Answers1

8

You can pre-load images easily with web-workers and hide them until you are ready to display them. This increases page load speed and reduces jank so that the flow is seamless between click and load.

The main benefits to Pre-loading an image are usually seen when transitioning between a menu to a page with desired content, say a map or the next image in a slideshow or something similar. If you have a click event that takes a user to a picture then it's beneficial to pre-load. If you are testing with google's page speed insights you will notice a huge performance increase as well with a pre-load vs conventional load when clicked functionality.

Check out this code over at Github, I think you may find it useful.

If the image is loaded using a web-worker you avoid blocking the DOM construction so assigning a web worker to load the image when it's ready rather than when the rest of the page is will be helpful too, but that doesn't sound like pre-loading to me but rather an order of operations assignment. If the image isn't the content but rather the background it is unnecessary to make it DOM build blocking. Using a web-worker in this case is better.

James Fehr
  • 106
  • 4