Stop css file from being downloaded when on a mobile view

Question

To increase page speed of my responsive page, I have to minimize HTTP request. In my homepage I have a slider, and in mobile view I don't wish to show the slider, and show a simple image instead.

So to do that how can I stop slider css and slider js from being download ?

And does style="display: none" in media quires stop the slider images from downloading.

Thanks in advance,

Regards, Ganesh K

Answer 1

And does style="display: none" in media quires stop the slider images from downloading.

display:none; will only stop the images from being displayed, they will still be downloaded.

One possiblity to truely stop the slider from being download is responsejs.com/ because it will swap your markup based of the viewport.

Here's a full example using reponsejs.com on another question:
response.js is not firing at the breakpoints

In your specific case, I'm not certain that you could stop downloading the slider CSS, though that would be relatively small anyway. It's quite likely you will be able to stop downloading the slider images and JS though, and that's where most of the bandwidth would be.

Good luck!

Answer 2

you can use

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

In media queries you can set mediatype attribute for specific devices.. But i think in most of the cases setting display:none would still download your image... For more details on this please refer http://timkadlec.com/2012/04/media-query-asset-downloading-results/