Menu icon Foundation
Visibility classes implementation questions

Heya guys,

I seek help to further understand more about its uses and best practices in regards to images, so I'm gonna throw out a few short questions real quick.

1. Example - I have some image gallery content that I want to show for desktops only and when it changes to tablet form, show medium images and on mobile phone, show small images. Let's say I am now using a tablet, so the visibility class is hiding the large and small but serving my medium content. Would the webpage load the large and small content and all its images as well even though its hidden?

2. If yes, is everyone else avoiding visibility for non images due to performance concerns? Or it should be used in conjunction with interchange?

3. Actually by this point of writing I am already suspecting it does load all the 3 content... sortof loading "duplicate" content. How are you guys doing it the proper way?

Thanks!

visibility classesmedia query

Heya guys,

I seek help to further understand more about its uses and best practices in regards to images, so I'm gonna throw out a few short questions real quick.

1. Example - I have some image gallery content that I want to show for desktops only and when it changes to tablet form, show medium images and on mobile phone, show small images. Let's say I am now using a tablet, so the visibility class is hiding the large and small but serving my medium content. Would the webpage load the large and small content and all its images as well even though its hidden?

2. If yes, is everyone else avoiding visibility for non images due to performance concerns? Or it should be used in conjunction with interchange?

3. Actually by this point of writing I am already suspecting it does load all the 3 content... sortof loading "duplicate" content. How are you guys doing it the proper way?

Thanks!

Wing-Hou Chan over 5 years ago

Hi Damian,

You should probably know that the visibility classes apply a display: none to the element according to media queries.

Display: none does not reduce load time. The code/image/whatever is still loaded but is not rendered.

The next two questions require a more personal, "opinionated" answer.

I'm not too sure if Interchange is more efficient that visibility classes. I haven't tested it out myself and I haven't found any written record. It is a script though so it may possibly be less efficient, however as I haven't tested it I cannot be certain.

I use visibility classes for a few non-images and have yet to find a need to use Interchange.

Interchange also has a drawback that it requires JS, so browsers with JS disabled won't have responsive content, unless there is a CSS fallback.

Of course this is just my opinion and I would be glad to see others.

Talasan Nicholson about 5 years ago

Hi -

Just a quick pointer to #1, if you set "visibility: hidden" on the images they will not load. I was hoping Foundation did this already but you can simply do this yourself with media queries.