个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试创建一个网站，登录页面的背景将包含一系列大约 10 张图像，这些图像会以几秒的间隔逐渐淡入淡出。出于某种原因，当图像发生变化时，有一个短暂的瞬间，我注意到背景颜色(在我的情况下为白色)闪烁。我假设这是因为图像在实时加载时需要很长时间，因为这些图像质量非常好，每张大约 3-6 MB。当一切都完成加载时，它似乎过渡得更顺利。
我有以下代码:
<!DOCTYPE html>
<HTML lang="en">
<HEAD>
<TITLE>Troubleshoot</TITLE>
<META charset="utf-8">
<SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(document).ready(function () {
let imgs = ['joshua-sortino-498896-unsplash.jpg', 'theodor-lundqvist-438530-unsplash.jpg', 'cristian-moscoso-1924-unsplash.jpg', 'nathan-dumlao-576639-unsplash.jpg', 'anthony-delanoix-575672-unsplash.jpg', 'karim-manjra-702188-unsplash.jpg', 'jay-dantinne-499958-unsplash.jpg', 'jeremy-bishop-346050-unsplash.jpg', 'robert-tudor-704838-unsplash.jpg', 'john-towner-126926-unsplash.jpg', 'bady-qb-751603-unsplash.jpg', 'caleb-miller-738108-unsplash.jpg', 'christopher-czermak-705859-unsplash.jpg', 'jonathan-gallegos-727409-unsplash.jpg', 'justin-lane-753659-unsplash.jpg', 'michael-liao-725983-unsplash.jpg', 'raphael-nogueira-559166-unsplash.jpg', 'robin-noguier-572033-unsplash.jpg', 'sorasak-252182-unsplash.jpg', 'usukhbayar-gankhuyag-726907-unsplash.jpg'];
$(function () {
let i = 0;
setInterval(function () {
i++;
if (i == imgs.length) {
i = 0;
}
$('body').css('background-image', 'url(../images/backgrounds/' + imgs[i] + ')');
}, 5000);
});
});
</SCRIPT>
<STYLE>
body {
background-image: url('../images/backgrounds/sorasak-252182-unsplash.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
opacity: 1.0;
transition: background 4s cubic-bezier(0.4, 0, 1, 1);
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
有没有比我目前使用的更好的方法来实现这种背景淡化效果？有什么建议或技巧可以使它变得更好吗？非常感谢!
最佳答案
您可以预加载图像，以便它们在最终需要转换时准备就绪。
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
关于jquery - HTML 背景图像闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52529681/
25
4
0
我是 Jetpack Compose 的新手。我目前正在开发一个聊天应用程序。我要求用户从图库中选择图像或从相机中拍照。然后我将文件 Uri 保存到数据库中，然后收听所有消息的列表。更新此列表时，此图
强制性代码，但 jsFiddle 准确地演示了这个问题。我有一个在 3 秒内扩大和淡出的圆圈。声纳风格是我的意图。问题是动画完成后它会快速“闪烁”然后重新开始。 请在此处查看问题:http://jsf
您好，我有一个多种颜色的 Logo ，我想将其用于随机/不稳定的故意闪烁效果。我只能找到其他关于使用淡入/淡出功能进行闪烁技巧的文章。关于如何用 css3 和/或 jQuery 做这样的技巧有什么想法
我正在使用 Swing 创建组件并使用 GLCanvas (com.jogamp.opengl.awt.GLCanvas) 创建我的窗口。 接下来就是问题了 在初始状态下，一切正常，但是当我拖动窗口调
我将 PhoneGap 2.2.0 与 jQuery Mobile 1.2.0 结合用于我在 Android 平台(版本 2.3.3 及更高版本)上的应用程序。在我使用固定标题的页面上，根本没有转换。
在我们使用 JavaScript 向页面添加图像或文本后，我们的网页在 iPad 上闪烁。我们尝试了 -webkit-backface-visibility:hidden; 的各种组合； -webki
有人能告诉我为什么在这个使用 SwingWorker 的简单演示中，屏幕闪烁，好像按钮不断跳跃一样？ (关于改进多线程部分的反馈也值得赞赏)。 import java.awt.EventQueue;
我正在运行时从 CSV 文件向字符串网格添加多行，但是 StringGrid 在更新时似乎会闪烁很多，我认为会有一个 beginupadate/Endupdate 命令来停止此操作。但是我找不到它。有
我的窗口中有一个文本元素，我希望它每隔几秒或几毫秒闪烁一次或出现并消失。 我的代码是: import QtQuick 2.6 import QtQuick.Window 2.2 Window {
我的窗口中有一个文本元素，我希望它每隔几秒或几毫秒闪烁一次或出现并消失。 我的代码是: import QtQuick 2.6 import QtQuick.Window 2.2 Window {
我在UIButtons中有3个UIView，它们具有相同的文本颜色和相同的背景颜色。轻按三个按钮即可触发相应的事件。但是只有其中之一会响应触摸而“闪烁”。其他两个会发生什么？它们有时(但很少)具有“闪
我在 iOS 8 下实现 UIRefreshControl 时遇到了一种闪烁。每次我第一次到达 tableView 的顶部时(即应用程序刚刚启动时)，我都会看到下面的 gif 中显示的闪烁。这不会发生
我希望有人能帮助我。我遇到以下问题: http://jsfiddle.net/zhPAF/ 标记: About Us
当鼠标悬停在图像“A”上时，尝试让图像“B”覆盖在图像“A”上。理想情况下，我希望它淡入。 HTML: jQuery:
我有一个 TabControl，我可以在其中添加/删除多个 TabPage。 当我添加足够多的页面以至于必须显示导航按钮时，我遇到了闪烁问题。 当导航按钮(左右导航的 2 个箭头)未显示时，我根本没有
我尝试实现自定义双缓冲，但它会导致闪烁。 这是控件(继承自Control的自定义控件)构造函数中的代码: bufferContext = new BufferedGraphicsContext();
我有以下代码: var footer = $('.footer'), extra = 0; // footer.css({ opacity: '0', display: 'block' });
我遇到了与 JPanel 中闪烁相关的问题。不知道为什么， window 里的球时不时地闪烁。我尝试了几种方法，比如双缓冲、BufferStrategy、Canvas，但都不起作用。主要思想是使用线程
我试图在 OpenGL 中绘制一些文本，而程序绘制立方体或任何 Opengl native ，因此，当我尝试将文本放在屏幕上时，它闪烁得非常快，我不知道为什么，我试图改变 sleep 值什么都没有..
我已经使用 LibGDX UI Setup 启动了一个项目。 我在 implements ApplicationListener 中唯一拥有的是: public void create() {
我是一名优秀的程序员,十分优秀！