个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
25
4
我已尽最大努力成为 Javascript/Ajax 技术的纯粹主义者，确保所有 Ajax-y 行为都是对基本功能的增强，而当禁用 Javascript 时，网站也能正常运行。但是，这会导致一些问题。
在某些情况下，只有在浏览器中启用了 Javascript 时，DOM 节点才应该可见。在其他情况下，它应该只在禁用时可见。以表单上的提交按钮为例，该按钮有一个带有自动提交的 onchange 处理程序的下拉列表(使用 JQuery 的表单插件):
<form method="post" action=".">
<label for="id_state">State:</label>
<select name="state" id="id_state" onchange="$(this.form).ajaxSubmit(ajax_submit_handler);">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<input class="with_js_disabled" type="submit" value="OK" />
</form>
和 Javascript:
<script type="text/javascript">
$(document).ready(function()
{
$(".with_js_disabled").hide();
});
</script>
启用 Javascript 时，不需要提交按钮(由于 onchange 处理程序)。但是，JQuery 的 $(document).ready 函数(以及更直接的 document.onload)仅在页面完全加载和呈现后调用 - 因此，提交按钮最初显示，并且在 Javascript 加载时出现“闪烁”执行并将节点的显示设置为“无”。
我已经接受这是开展业务的成本，但还没有找到解决方法。但是有没有一种我不知道的技术可以最大限度地减少影响，甚至完全消除它？
编辑:
<noscript>下面很多人提到的解决方案似乎很有希望，但在 Safari 上对我不起作用。然而，Prestaul 的第二个建议非常有效:
<body>
<script type="text/javascript">
document.body.className += ' has_js';
</script>
<!-- the rest of your page -->
</body>
然后可以直接使用 CSS 来设置样式:
body .js_enabled_only { display: none; }
body .js_disabled_only { display: block; }
body.has_js .js_enabled_only { display: block; }
body.has_js .js_disabled_only { display: none; }
这第二行仅供引用，可以(并且应该)删除以避免您的元素不应该显示的情况: block 。同样，对于其他显示样式，您可能需要第三行的不同变体。但这个解决方案非常干净，IMO，并且在我的测试中完全消除了闪烁效果。
最佳答案
如何组合其中一些解决方案:
<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>
或者我更喜欢在正文中添加一个类(将 <script> 标记放在正文顶部并且不使用 .ready 事件):
<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>
关于javascript - 如何消除渲染后 "flicker"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/463670/
25
4
0
我最近从 Xcode 4.3 升级到 4.4，我正要沮丧地砸我的屏幕。 我遇到的问题是代码完成。当我输入一个变量或方法名称时，完成窗口会弹出它应该有的建议。但是，如果我尝试使用光标键在建议之间滚动，建
我在使用 jQuery 图像旋转器时遇到了一些问题。当快速单击下一个/上一个按钮两次时，图像会闪烁，您最终会看到两个图像。关于如何修复它有什么想法吗？ 这是 HTML CSS
我已尽最大努力成为 Javascript/Ajax 技术的纯粹主义者，确保所有 Ajax-y 行为都是对基本功能的增强，而当禁用 Javascript 时，网站也能正常运行。但是，这会导致一些问题。
我的 Gatbsy 网站的页面加载时，未设置样式的内容“闪烁”。在此处查看当前部署预览可能最有帮助 https://happy-mahavira-5cd669.netlify.com/ . 到目前为止
背景:我们有一个嵌入式系统，可使用 10 位模数转换器将线性位置(0 毫米 - 40 毫米)从电位器电压转换为其数字值。 ------------------------ 0mm |
我尝试为伪元素宽度 css3 设置动画。一切都好。但在 Firefox (43.0.3) 上，动画结束时字体会闪烁: div { width:500px; height:500px; co
[已解决]:应用适当的列表迭代过程修复了问题。 (如下图) 我目前有一个程序，如果满足特定条件，列表中的元素将被迭代并删除。由于程序的性质，这可以直观地看到。 屏幕上正在迭代的对象有时会闪烁。这通常发
我有一个进度条，我想在用户单击某项时更新它。所以可以通过进度条来回前进。 目前，该栏似乎可以正常工作，但是该栏在闪烁，好像每秒都在加载该栏。例如，用户处于 70%，因此该条将填充到那里，然后清除，然后
我将 GridView 与图像项一起使用，通过 android DataBinding 技术 加载图像。如果向列表中添加一些新项目并通知适配器，那么 GridView 会闪烁，为什么会出现这种情况？如
我正在使用 KO 构建 SPA(单页应用程序)。该应用程序看起来像一本书，用户可以翻页。 问题是每次加载页面时，页面都会有短暂的“闪烁”，用户看到的是页面的无样式版本。我猜这是由于很多样式都依赖于 k
问题 如交互式 BaseTable API Playground 所示 here ，当我开始滚动时，跨行会闪烁开/关。 这是库中的一个已知错误，并且已经发布了很多关于它的问题: https://git
例如:我有一个 TFrame(称为 TPageFrame)，它有许多控件，例如TreeView 左对齐、拆分器和由编辑和 RichEdit 组成的主客户区域，如下图所示: 代码看起来像这样: type
我正在尝试在 F# 中实现双缓冲。我遇到的所有示例都是 C#。 let r = form.DisplayRectangle let buffer = new Bitmap(r.Widt
我正在使用 grid 设计一个交互式绘图R 中的包。作为交互性的一部分，我反复删除并重新创建绘图的各个部分。但是，网格元素的总数(使用 grid.ls() 命令获得)保持不变；我创建的所有内容之前都已
场景如下:我有一些信息要显示在 ListView 上。每行都可以有标题、正文、日期、头像和更多数据。还有一个来自网络的 ImageView。 ImageView 的每一行都有不同的高度。我知道下载后它
我正在尝试制作数字时钟。它的问题之一是显示器会“闪烁”。换句话说，wx.StaticText 小部件(在本例中为 self.ST)将在很短的时间内变为空白。我相信原因可能在于 self.ST 更新的方
我似乎在使用在 Firefox(以及 iOS)中设置了“位置”的背景图像时遇到了问题。 在 iOS 上，当您滚动时图像会消失一秒钟，然后再回来。在 Firefox 上，它们只会在我使用 .animat
标题听起来有点乱，但我不想写得太长，所以请耐心阅读...... 我正在编写一个非常简单的 OpenGL 演示，它将图像加载为纹理，然后在屏幕上无限地水平滚动图像。以下是我如何加载纹理并渲染单帧: vo
我遇到了此处描述的相同问题:same problem ( fiddle :original fiddle)但我还不了解 JS，我在编写代码时正在学习，所以当我的 html 代码与现在有点不同时，我不知
您好 stackoverflow 社区... 我已将多个 (JavaFX) Menu 实例放入一个菜单中(位于 GluonMobile-View 的子节点中): 问题是，当类(class)器悬停其中一
我是一名优秀的程序员,十分优秀！