Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/backbone.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 图像闪烁及其预防。正确的编码标准_Javascript_Css_Html_Animation_Gsap - Fatal编程技术网

Javascript 图像闪烁及其预防。正确的编码标准

Javascript 图像闪烁及其预防。正确的编码标准,javascript,css,html,animation,gsap,Javascript,Css,Html,Animation,Gsap,我最近一直在处理一些基本的动画,同时也在努力遵循良好的网络实践。我遇到的问题是,在加载页面之前,如果不使用预设css方法隐藏元素,图像会闪烁 通过使用我的普通css隐藏元素,然后使用javascript显示元素,很容易防止闪烁,但在我看来,如果有人禁用了javascript,这似乎是一种可怕的做法 我是否应该使用HTML5功能,将标记放在标题中,然后使用单独的样式表为没有javascript的用户将不透明度和位置设置为最终设置?这是最优雅的解决方案吗 我已经开始使用greensock(gsap)

我最近一直在处理一些基本的动画,同时也在努力遵循良好的网络实践。我遇到的问题是,在加载页面之前,如果不使用预设css方法隐藏元素,图像会闪烁

通过使用我的普通css隐藏元素,然后使用javascript显示元素,很容易防止闪烁,但在我看来,如果有人禁用了javascript,这似乎是一种可怕的做法

我是否应该使用HTML5功能,将
标记放在标题中,然后使用单独的样式表为没有javascript的用户将不透明度和位置设置为最终设置?这是最优雅的解决方案吗

我已经开始使用greensock(gsap)库来
TweenLite.from
,因为我可以在css中将所有内容设置为最终状态,但在第一次加载页面时,我会看到轻微的图像/文本闪烁。我喜欢这个解决方案,因为我可以为没有javascript的人设置所有css,并且它允许我轻松地从一个点到一个现有点设置动画,而不是像使用javascript或jQuery那样向后工作。但是,仍然存在图像闪烁,这是不可接受的。页面预加载程序能解决这个问题吗

这几天普遍同意的做法是什么?我还担心SEO以及将内容设置为
可见性:隐藏
显示:无
然后设置动画的后果。谷歌蜘蛛读javascript吗


看看HTML5样板和现代化

它附带了一个智能解决方案,以查看客户端是否在CSS中启用了JavaScript

默认情况下,类
no js
应用于HTML标记,然后由Modernizer将其替换为
js
。这样,您就可以相应地限定CSS选择器

CSS示例:

.no-js .foo {  }
.js .foo {  }
这应该执行得足够快,使启用JavaScript的客户端不会看到
no js
样式

参考资料:


“但在我看来,如果有人禁用了javascript,这似乎是一种可怕的做法”——通常是通过一个脚本将一个类添加到
html
元素中,该脚本作为第一个元素直接嵌入
head
——内联脚本,而不是外部脚本,
document.documentElement.className='hasJS'
或其他什么–然后使用该类指定仅在JS可用时应用的格式,
html.hasJS.foo{display:none;}
并且该类添加得足够快,可以防止闪烁?这听起来是完美的解决方案。我想知道添加一个完整的库来解决一个问题是否有点过火。编辑:看起来CBroe对原始问题的评论解释了如何在不需要外部库的情况下准确地执行您的建议。您问“目前对此普遍认可的做法是什么?”。HTML5样板是许多行业最佳实践的事实标准。如果您只想包含特定的功能集,您可以推出自己的定制Modernizer。如果这不符合您的需要,请随意使用@CBroe的解决方案,它本质上是相同的。关于页面闪烁:必须在头部添加脚本标记,以便在执行时阻止页面渲染。好的,太好了,谢谢。我可能会花一段时间进行调试,然后才发现它需要放在脑袋里。:)