How to make an element not load in Bootstrap 2 on phone?

Question

I've got an old website that uses Bootstrap 2. On it I've got a picture slider with pics that I want to load on tablet and desktop, but not on phone (too much data to load).

When I use the class .hidden-phone, Bootstrap 2 uses display:none to hide the element. That means it still sends all the data to a phone, but doesn't display it. So it doesn't help reduce loading time.

Does anyone know how to make sure the element is not loaded on a phone? Preferably within the Bootstrap 2 structure...

Thanx,

Thom

Answer 1

Not loading it at all is not possible with bootstrap. Bootstrap can only hide/show/modify elements on the page (it is CSS after all). If you want to prevent loading, you need to do that on the server-side, for example by determining the user agent and sending the correct page.

Answer 2

Those Bootstrap classes are just visibility settings, they will hide pictures, but many browsers will still load them.

If you prefer doing it on the client side, you could try using Bootstrap visibility classes to hide your slideshow and then use additional method, maybe something like this, to prevent slideshow images from loading