Browser related: css print style sheets - stopping client download overhead with @media

Question

Hi

Hopefully I can explain this well and hopefully I'm thinking the right way :)

My question is, If I have a print style sheet that has a couple of classes that "displays" a background image, is there a way to make the browser download the images at the point of printing or do you have to preload the images.

I have mixed results doing a print styled background image with FF and IE. IE actually seems to download the image at print? where as FF doesn't - (even though Firefox's Live HTTP headers addon says it does!).

My code is basically saying this:

@media=screen .class { display: none;

}

@media=print .class { display: list-item !important; list-style-image: }

TYIA

Jared

Answer 1

Not a great solution, but you could provide a "Print" button which modifies the style when it's clicked prior to actually printing and changes it back afterwards?

For example (using jQuery):

<script type="text/javascript" language="javascript">
    function doprint() {
        $('.class').css('display','list-item').css('list-style-image','img.jpg');
        window.print();
        $('.class').css('display','none').css('list-style-image','');
    }
</script>

<input type="button" onclick="doprint();" />

Obviously you can get around this by using the browser's Print function.

There's also the issue of the overhead you've saved by not preloading the image being well and truly used up by using jquery and script...