How to eliminate post-render “flicker”?

后端未结

关注

 6  1360

I\'ve tried my best to be a purist with my usage of Javascript/Ajax techniques, ensuring that all Ajax-y behavior is an enhancement of base functionality, while the site is also

相关标签:

6条回答

北恋

2021-01-31 11:36

A simple thing to try: add <script>jQuery.ready();</script> right before closing the body tag.

This will force all binds to the 'ready' event to fire. And if you make them fire in the end of the document, the DOM is loaded and ready to go, even if the "native" onDomContentLoaded event is not yet fired.

This usually works for me when I want to remove flickering, especially in IE/win, since IE has it's own domready emulator in jQuery's 'ready' event.

0 讨论(0)
发布评论:

提交评论
- 加载中...
忘了有多久

2021-01-31 11:48
For situations identical to yours, I usually put the submit button around a <noscript> tag. No one has suggested it, so I am not sure if it is considered bad practice around these parts, but it is what I use and it works for me.

If you only want a node visible when Javascript is enabled, you could do in the head:
```
<noscript>
    <style type="text/css">
    .js-enabled { display: none; }
    </style>
</noscript>
```
And then give any Javascript-only elements a class of js-enabled.
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2021-01-31 11:49

Just a thought: I'm not sure if this will work, but you could try putting some Javascript in the document head to write a CSS style element that would hide the button.

0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2021-01-31 11:54

How about combining some of these solutions:

<style type="text/javascript">
    .only-without-script {
        display: none;
    }
</style>
<noscript>
    <style type="text/javascript">
        .only-with-script {
            display: none;
        }
        .only-without-script {
            display: block;
        }
    </style>
</noscript>

or I prefer adding a class to the body (place your <script> tag at the top of the body and don't use the .ready event):

<head>
    <style type="text/javascript">
        body.has-script .something-not-ajaxy {
            display: none;
        }

        input.ajaxy-submit {
            display: none;
        }
        body.has-script input.ajaxy-submit {
            display: inline;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className += ' has-script';
    </script>
    <!-- the rest of your page -->
</body>

0 讨论(0)

旧巷少年郎

2021-01-31 11:54
I can think of two methods:

1 - Pre-detect if Javascript is enabled and save that information in a cookie/session. This could be done at the front page, and should eliminate most flickers.

2 - Use the livequery plugin, which detects elements as they are added to the DOM. You can run it right when Javascript finishes loading, which should be much before the document (it its in the head).
```
$('.with_js_disabled').livequery(function() {
     $(this).hide();
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
后悔当初

2021-01-31 11:56
Just like David said, you can add a Javascript, that adds a style sheet to hide all "unnecessary" html-elements:
```
<head>
  ...
  <script type="text/javascript" language="javascript">
    document.write('<style type="text/css"> .disabled-if-javascript { display: none; } </style>');
  </script>
</head>
...
```
If Javascript is enabled, it sets all elements of class "disabled-if-javascript" to hidden, before the body is even loaded. Just add this class to all elements that need to be hidden, if javascript is enabled. You might also need a class enabled-if-javascript that does the opposite, to show certain elements that would be hidden for non-javascript. Maybe you need to add "!important" to your style definition there, to override the existing (non-javascript) rules.
0 讨论(0)
发布评论:

提交评论
- 加载中...