发表新帖
发表新帖

How to Hide DIVs, they are Showing for a Split Second on page Load

后端 未结
关注
5 1774
陌清茗
陌清茗 2021-01-05 19:19

I have made a very quick jQuery slideshow, and I\'m using this to hide the DIVs which shouldn\'t be shown until it\'s their turn:

$(document).ready(function(
相关标签:
5条回答
  • 不要未来只要你来
    2021-01-05 19:29

    Always try to imagine what users who have JS turned off will see. If you use the CSS solution, the non-first DIVs will not be shown for them either, but if you change slides programmatically, they will see only the first one, obviously. It's best to give them a "No JS" option. Then, if you can be sure the user has JS enabled, you can hide the divs using CSS and show them using JS.

    0 讨论(0)
  • 暗喜
    2021-01-05 19:37

    Disabling in CSS is fine, but then users without JS will never see them.

    To disable for users with JS only, mark the body and appropriate CSS:

    <body>
  <script type="text/javascript">
    document.body.className += " js";
  </script>

    CSS:

    .js #gall2, .js #gall3, .js #gall4 { display: none; }
    0 讨论(0)
  • 轮回少年
    2021-01-05 19:42

    As an alternatie to orip's answer, you can do the following if you don't like adding scripts in the <body>:

    <html>
<head>
  <script src="jquery.js"></script>
  <script>
    $('html').addClass('js');
    $(function() {
      // do DOM ready stuff
    });
  </script>
  <style>
  .js #gall2, .js #gall3, .js #gall4 { display: none; }
  </style>
</head>

    You will avoid flickering this way because you are adding a class name to the HTML before DOM ready.

    0 讨论(0)
  • 别那么骄傲
    2021-01-05 19:44

    Yes, it's certainly acceptable to do it in your CSS

    The other respondents are correct. It's not a good practice to make things only visible with JS. I guess I was just thinking technically : changing your CSS this way would solve the issue.

    0 讨论(0)
  • 小蘑菇
    2021-01-05 19:48

    They are being shown because on default the divs are likely set to be shown. Since it can take a few seconds for the "ready" event to be fired on the page, the .hide() method calls won't hit until everything on the page is loaded and ready.

    If I remember right the .hide() method will just set the "display" attribute of the element to "none". So by default setting the div to be hidden through CSS allows them to always be hidden, and you get the added bonus of users without JS not seeing them either.

    0 讨论(0)
 看不清?
提交回复
热议问题