CODEWITHSUNDEEP
javascriptjquerypageload
AE Grey
AE Grey

Reputation: 368

Javascript/Jquery page load specific images first in order

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

Upvotes: 2

Views: 3665

Answers (5)

Felix
Felix

Reputation: 852

Don't sure if it might suit you, however, did you think of having all the page loaded, and than with JQuery show what you need in right order? You could have some part of the page load before all the images, might be even some simple version of the same page with lighter images or without images but with background gradient or so...

Upvotes: 0

user1693166
user1693166

Reputation: 1

In my opinion, the direct way of load the background image first is put the background images in the front of you document, so when the browser load the page , the image is begin to loding. but I know maybe the div which had image may not in the front. I thick you can use the parent div's background-image attribute. and use background-position to control the posotion, also you can use a empty div layer with background-color on the parent color to cover the space that you do not want to see the background-color; so you can load the background iamge firest. By the way, if you have many background images to load , this means you will request the server for many times, it will be delay. so you can merge all the background-image into a single image and use the method of "CSS Sprites" to use it in where you want, I think it can speed you loading.

Upvotes: 0

Stu Cox
Stu Cox

Reputation: 4527

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.

Upvotes: 1

Aatch
Aatch

Reputation: 1856

Modern browsers are pretty smart, so there isn't much you can do to stop the loading of various files.

Probably the only real way around it is to load almost everything from javascript.

Rather than putting everything in your HTML, put everything in your Javascript. If you have the background images in the HTML, then they will be loaded first, and then your javascript can do the rest of the work.

If you want to avoid too much work, then making a sort of pre-load page with the background and other things, and then loading everything else via AJAX is a simple way. Just have an empty block element and request page contents from the server through AJAX.

Upvotes: 1

SaidbakR
SaidbakR

Reputation: 13534

The most simple way I know is to arrange your images in the order you wants in a display:none styled div at the most top of the page's body.

Upvotes: 0

Related Questions