Geek asks and answers

Display none Reduces load times or items that are still loading but not showing.

I am creating a responsive website using media queries. I need to switch to another navigation method for very small screens.

For desktop / tablet screens, I use the sprite-based UL / LI list method. For small smartphone screens, I will have a simple link text.

If I use, Display: none; to hide sprite-based navigation for smartphones, will the sprite image be downloaded, but just not shown? Do I need to parse an image link in my css request for smartphones? Or should I just leave a link to the image from the original CSS in general, since I design small or large (i.e., By default, css is for small screens, and then media queries change the situation as the screen grows larger).

+7
source share
3 answers

To answer your question, display: nonedoes not reduce download time . It still loads the content / class / code in question, but the browser does not display and does not display them.

It looks like you are using a mobile approach, so you can:

  • //, // , , .

    • , (sprites .) , .
    • / -.

  • // , , -. , :

    • /
    • (/ ..) .

2, - , CSS Javascript- -. [: /).

enquire.js ( ) :

<script type="text/javascript">

  // MQ Mobile
  enquire.register("screen and (max-width: 500px)", {
      match : function() {
          // Load a mobile JS file
          loadJS('mobile.js');
          // Load a mobile CSS file
          loadCSS('mobile.css');
      }
  }).listen();

  // MQ Desktop
  enquire.register("screen and (min-width: 501px)", {
      match : function() {
          // Load a desktop JS file
          loadJS('desktop.js');
          // Load a desktop CSS file
          loadCSS('desktop.css');

      }
  }).listen();

</script>

, 501px , desktop.js, desktop.css - /, 501px, .

+12

, .

+1

:

:

I did speed tests and display: nonedid not load 2 times faster with the DOM.

But +1 for helpful tips.

0
source

More articles:


All Articles