个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 gif 在我的网站加载时出现，但是 gif 消失了，页面在所有内容加载后出现，除了通过 css 调用的背景图像。
我怎么能让 gif 仅在背景图像加载后才消失。
我正在为加载程序使用此代码:
html:
<html class="loading">
<!-- All the things -->
</html>
CSS:
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
JavaScript
// IE10+
document.getElementsByTagName( "html" )[0].classList.remove( "loading" );
// All browsers
document.getElementsByTagName( "html" )[0].className.replace( /loading/, "" );
// Or with jQuery
$( "html" ).removeClass( "loading" );
谢谢
最佳答案
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.splash').fadeTo(555,0, function() {
$(this).remove();
});
});
</script>
</head>
<body>
<div class="splash" style="position: absolute; width: 100%; height: 100%; background-image:url(mygif); background-repeat: repeat;"> </div>
<!-- All the things -->
</body>
</html>
测试过! => http://jsfiddle.net/3m3S8/
关于javascript - 加载 Gif 页面不加载背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25044543/
25
4
0
有谁知道是否可以将多个 gif 或动画 gif 加入到一个动画 gif 中(即，将这些帧连接到一个主动画 gif 中)？ 我想要一些服务器端功能来执行此操作。 文件的尺寸、模式等将相同，只是内容不同。
提前道歉，但这不是一个真正的photoshop问题。相反，我试图想出一些令人信服的东西，但尽可能地利用 gif 格式的压缩和特性来为动画生成尽可能小的文件。 一些限制: 它需要至少 20 或 30 帧
如何创建播放一次并在最后一帧卡住的 GIF 图像。 我已经将循环属性设置为 1，所以第一个问题解决了。 但是动画结束后，gif并不是在最后一帧卡住，而是回到第一帧。 最佳答案 您需要将 gif 的循环
我有两个不同大小的 GIF。我希望能够将一个动画 GIF 放在特定位置的静态背景 GIF 上，同时将文本添加到结果中。我是 ImageMagick 世界的新手，请帮忙。 我试图实现以下结果，其中狗贴纸
你好 stackoverflow 世界。(这是我第一次在这里真正发布问题。令人兴奋) 不久前，我从我公司的一个团队那里继承了一个已有 2 年历史的 MVC 网站。我现在知道这个解决方案的大部分来龙去脉
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 1 年前。
我想将我的处理草图之一导出为 gif 形式，并使用 extrapixel 的 Gif 动画库 ( http://extrapixel.github.io/gif-animation/ ) 来执行此操作
我正在寻找一个可以处理动画 gif 图像并在其上写入文本的函数。 工作解决方案可能由 Gif4j lib 提供，但我正在寻找开源解决方案或建议如何自行实现它。 如何在 Java 中将文本放在 gif
这个问题在这里已经有了答案: Change File Extension Using C# (6 个答案) 关闭 8 年前。 此代码将重命名所有文件名: static private void Re
我会保持简短； 有什么方法可以区分静态 GIF 图像和动画图像吗？我正在使用 C#。 谢谢 最佳答案 Here's an article about how to determine the numb
我试图在视频上重叠动画 gif，但没有成功。 我的目标是下一个: gif 动画必须循环播放，直到视频结束。 gif 被缩放以覆盖整个视频。 gif 保留透明度。 我在这方面取得的最大成就是 gif 使
在您的网站上放置网站图标时，您显然可以使用动画 gif，只需将 gif 文件的扩展名更改为 .ico . http://www.k-director.com/blog/how-to-add-an-an
所以我试图为一个充满 gif 的文件夹添加水印，但我收到一条错误消息，说我当时只能使用一个 GIF 流，有没有办法绕过这个问题？ @echo off setlocal for %%G in ("%~d
我有大约 200 张 jpg 图像。我需要堆叠它们，以便我可以将它们转换为简单的动画 gif 图像。是否有任何免费工具可以完成这项工作？我的操作系统是windows。 我不太关心输出的质量。 最佳答案
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
我想使用库显示 GIF WPF Animated GIF 。但是，当设置属性 PictureSource 时，进程内存会从 208MB 增加到 1GB。为什么？ XAML
几天后我有话要说。我必须引用细胞原子。我想在显示元胞自动机进化的幻灯片中显示一个小 gif，所以我的问题是:如何将使用 golly game of life 创建的模式和进化转换为动画 gif？ 最佳
看这段代码: $('#loader').show(); $.post( '/action.php', function( data ) { // do anything with data $('#
作为项目的一部分，我们需要以编程方式将多个动画 GIF 以网格的形式组合成一个主动画 GIF(一个 gif 文件)。 我们不关心它是在客户端(即带有 ios/android 的智能手机)还是在服务器端
我正在制作一个小游戏。这不是 Action 游戏，而是解谜游戏，因此性能并不是那么重要。现在，我有了主游戏区，一张背景图片。在某些情况下，我想在部分背景图像上绘制其他图像。我的问题是背景图片和叠加的图
我是一名优秀的程序员,十分优秀！