Home/ Questions/Q 8582057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T21:11:54+00:00

I’ve got a complicated side scrolling page I’m working on with several layers of

  • 0

I’ve got a complicated side scrolling page I’m working on with several layers of positioned divs that make up the background.

There’s also a ton of images on the page that slow down load time.

I need to prioritize the background layers (divs with css background images) to load in a specific order (i.e. first front hills, then back hills, then sky, then dog).

I’ve tried using a jquery load for this but the other items loading on the page still interfere with this. I’ve tried hiding them and showing them first on document ready, and putting them at the top of my HTML document. I figure there is some way to do it with a load event, but I’m not sure how to prioritize it from the rest of the page load.

I’m trying to figure out if there is a way to essentially pause all load, load my 4 images in order, then continue page load.

Thanks for any suggestions or comments! I will approve the first submitted answer that works! I know there’s other tickets similar to this, but I’ve been working on this all weekend and tried several of them but can’t seem to find something that works exactly like I need it to.

Thank you 🙂
– Ann

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you’re going to need quite a structured approach here.

    There are loads of factors that decide how long an image takes to load, and it’ll show as soon as it’s ready. You could keep some hidden until you’re ready to show them, but then you’re still loading loads of images at once which is slow and painful.

    You’ve clearly got a “creative” reason for loading in a specific order (background first, etc) – so embrace that… you can almost choreograph the loading by coming up with a schedule.

    Then remove all but the first ‘wave’ of images from the initial page load. As these are CSS background-image properties, this means removing them from the stylesheet.

    You can then load each subsequent set of images by setting their background-image style properties with jQuery:

    $('.foreground').css('background-image', 'url(<path>)');

    To create a ‘sequence’ you’ll want each set of images to start loading when the previous set has finished loading – detecting when background images have finished loading is discussed HERE – but the pattern might look something like this:

    var loadNextImageSet = function() {
    var imageSet = listOfImageSets.pop();
    loadImages(imageSet);
};

$(document).on('images-loaded', function() {
    loadNextImageSet();
});

loadNextImageSet();

    where loadImages() initiates the image loading asynchronously and fires a custom images-loaded event when done.

    If you still want your page to still load correctly (albeit not so smoothly) without JavaScript, you might want to try 2 stylesheets – one with all the images (for non-JS users) and one with only the first wave (for JS users). You can then ensure the right one is picked like so:

    <html>
<head>
    ...
    <noscript>
        <link rel="stylesheet" href="full.css">
    </noscript>
</head>
<body>
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'background-only.css';
        document.head.appendChild(link);
    </script>
...
</body>
</html>

    Not the cleanest way of using JavaScript, but the <script> element has to be as early on as possible to avoid a flash of unstyled content.

    • 0