O'Reilly logo

Mobile Web Performance Optimization by S. Niranga

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying none in CSS

When we apply display:none rule using CSS we can hide HTML elements. Although you can hide an element from the frontend view using display:none property, this doesn't prevent the object from being downloaded to mobile devices. As a result, these elements will slow down your mobile site or application.

However, if you are going to hide an image from mobile devices and your intention is to remove it completely from mobiles, there is a method that you can use. For example, to hide an image from being displayed, we use the following code:

<div style="display:none;">
<img src="myimage.jpg" alt="" />
</div>

However, this method doesn't prevent it being downloaded to the device. To avoid this, we can use this image as a DIV background ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required