gpt4 book ai didi

jquery - HTML 背景图像闪烁

转载 作者:太空宇宙 更新时间:2023-11-04 06:55:03 25 4
gpt4 key购买 nike

我正在尝试创建一个网站,登录页面的背景将包含一系列大约 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com