2

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

AE Grey
  • 368
  • 4
  • 14
  • Use `z-index` (css) or `zIndex` (Javascript) and manually set the "layer" for that image. That way, loading order won't matter. – Jeremy J Starcher Sep 24 '12 at 00:18
  • I've already got the css in place. the images load on top of each other, problem is the first background image (a big sky piece) loads first when I need it to load last. I have a really small body background that imitates the background layers in a 20k file, but the layers are 100k+ - which is why I'm looking to not cover up the background with the sky piece until the hill layers that have a higher z-index load first. – AE Grey Sep 24 '12 at 01:02

5 Answers5

1

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.

Aatch
  • 1,846
  • 10
  • 19
  • Yep, that's probably what I'm looking at - loading everything through JS. I can't do ajax unfortunately. – AE Grey Sep 24 '12 at 01:09
  • Why can't you do AJAX? It's standard in all browsers, even IE6. Anything that is likely not to probably doesn't support much of what you are using anyway. – Aatch Sep 24 '12 at 01:36
  • It's a specific aspx framework I'm working in - it uses ssi xslt for content. ajax doesn't work in it for some reason. It's a deadlined site due tomorrow, so I don't have time to figure it out :/ – AE Grey Sep 24 '12 at 03:15
1

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.

Community
  • 1
  • 1
Stu Cox
  • 4,486
  • 2
  • 25
  • 28
  • Thanks Stu! I was pretty sure something like this was the way I was going to have to do it. It will be just a lot more work than I'd hoped for cause this page has like 940832049823 images. I work for an ad agency - so this is a very creative site, theres a lot involved - it's a flash site on steroids in HTML5. They denied a "loading" graphic, so I'm trying to figure out how to make everything look somewhat decent :) – AE Grey Sep 24 '12 at 01:07
  • 1
    If you have tons of images, and they are lots of small images, have you thought about using a sprite-sheet? it takes more work to get it to work well, but cuts loading times by a massive amount since you aren't incurring HTTP request overhead for tons of tiny images.. – Aatch Sep 24 '12 at 01:40
  • Good suggestion there by @Aatch. In fact if you had a sprite sheet per "layer" you want to load, you're down to just loading 1 image per layer, which as well as being fast could be nicely separated into background, midground, foreground, etc. In fact it might become fast enough that you'd intentionally want to add a *slight* delay to give the layering effect - maybe just a 200ms fade in for each layer. – Stu Cox Sep 24 '12 at 06:14
0

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.

SaidbakR
  • 13,303
  • 20
  • 101
  • 195
0

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.

user1693166
  • 1
0

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...

Felix
  • 830
  • 10
  • 17