Change loading order of images already on page

Question

Is there any way without AJAX of changing the loading order of images on a page? Or even a way to completely halt or pause loading of images already present?

The use case is simple - I have a long list of images down a page, and visitors will be landing on different spots of the page using URL anchors (/images#middle-of-page) that refer to actual containers for those images.

I'd like in the least to load the images inside the requested container FIRST, then continue loading the rest of the images.

The challenge is that there is no way to know the image paths of the requested container image before loading the page DOM.

I've tried getting the container img contents on load, then using the Javascript new Image() technique, but it doesn't change the fact that that image on the page will still be waiting for all previous images to load.

I've also tried immediately prepending a div in the body with a background image (CSS) of said img path, but this also does not prioritize the image load.

Any other ideas?

Answer 1

You need to have a DOM with empty img placeholders, i.e.

<img src="" mysrc="[real image url here]" />

Or you can make images to display "Loading..." image by default. You can even cache real image url in some custom tag, mysrc for example. Then once you know what exactly images you want to show (and in what order) you need to build a sequence of image loading

var images = [];//array of images to show from start and in proper order
function step(i){
  var img = images[i++];
  img.onload = function(){
    step(i);
  }
  img.src = "[some url here]"
}

Hope this helps.

Answer 2

For interest, this is the function I ended up implementing based on the answers here (I made it an on-demand loading function for optimum speed):

function loadImage(img) { // NEED ALTERNATE METHOD FOR USERS w/o JAVASCRIPT! Otherwise, they won't see any images.

      //var img = new Image(); // Use only if constructing new <img> element

        var src = img.attr('alt'); // Find stored img path in 'alt' element

        if(src != 'loaded') {

          img

            .load(function() {
              $(this).css('visibility','visible').hide().fadeIn(200); // Hide image until loaded, then fade in
              $(this).parents('div:first').css('background','none'); // Remove background ajax spinner
              $(this).attr('alt', 'loaded'); // Skip this function next time
              // alert('Done loading!');
            })

            .error(function() {
              alert("Couldn't load image! Please contact an administrator.");
              $(this).parents('div:first').find("a").prepend("<p>We couldn't find the image, but you can try clicking here to view the image(s).</p>");
              $(this).parents('div:first').css('background','none');
            })

            .attr('src', src);
        }
    }

Answer 3

The img loading="lazy" attribute now provides a great way to implement this.

With it, images load automatically only when on the viewport. But you can also force them to load by setting in the JavaScript:

document.getElementById('myimg').loading = 'eager';

I have provided a full runnable example at: How do you make images load lazily only when they are in the viewport?

One really cool thing about this method is that it is fully SEO friendly, since the src= attribute contains the image source as usual, see also: Lazy image loading with semantic markup