我目前正在为我的网站开发一个主题切换器，它使用 Javascript/jQuery 来使用由按钮切换的 lightmode()/darkmode() 函数来操纵 Body.bg 颜色。我想要做的是在主体背景颜色与淡入淡出之间创建无缝过渡。我已经制作并创建了它，但问题是当主题读取存储类型时，它会在 Chrome 和 Chrome Canary 中快速闪烁，但在 Safari 和 Catalina 的 Safari Tech Preview 中它可以无缝工作。
但是，当用户切换到白色然后单击导航链接时，我一直遇到一个问题，这会导致暗模式主题黑色闪烁。我的网站开始时启用了暗模式，body bg = #0a0a0a，但是当它切换到白色并更新存储时，它仍然继承了黑色 body - bg 最初在我的主题的 style.less 中设置。
如果我删除背景颜色，那么白色闪烁会发生在深色模式主题上，理想情况下，我的最终目标是创建无缝页面导航，而无需页面闪烁，以便在主体加载之前快速读取初始背景颜色，以便- 白色背景上的白色，黑色背景上的黑色不闪烁以造成视觉干扰。
我已经尝试了所有我能想出的解决办法，但找不到解决方案。它在 Safari 中工作，没有页面闪烁，但在 Chrome 中它仍然闪烁。我已经包含了视频链接，显示了我想使用 Google chrome 的 Safari 渲染器和 main.js 代码文件完成的工作。
Safari - 无缝过渡
Chrome 和 Chrome Canary - 观察白色过渡时的闪烁。这很快但非常令人沮丧。
所以这是怎么回事？!问题是主题现在设置为白色，但初始 body - bg 颜色在 style.less 主题中是黑色的，它会在快速返回白色主题之前快速选择它。
当我在 Canary 中审核站点并以模拟的慢速 3G 运行它时没有闪烁，但是当它正常运行或在审核中以快速 3G 运行时会出现闪烁。我的假设是在加载之前在 body 上设置一个超时，但我尝试将其作为解决方法，但仍然闪烁。
我已经尝试创建存储在本地存储中的 key 用于我的存储并暂停正文加载，但到目前为止我找不到解决这个问题的方法:/
所以我想做的是阻止 body bg 颜色基于主题颜色基色闪烁白色或黑色而不闪烁。
感谢您花时间阅读我的问题!
document.addEventListener("DOMContentLoaded", function() {
document.body.style.backgroundColor = "inherit";
if (document.readyState === 'complete') {
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading white bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading fffwhite bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
这是我尝试变通的版本。
var clickDelay = false;
var themeType = -1;
var lightmodeON = false;
window.onload = function() {
console.log('First');
if (event.target.readyState === 'interactive') {
$('body').css({ background: ''});
document.body.style.backgroundColor = "inherit";
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
document.body.style.backgroundColor = "#FFF";
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
document.body.style.backgroundColor = "#0a0a0a";
}
}
overloadBG();
};
document.addEventListener("DOMContentLoaded", function() {
document.body.style.backgroundColor = "inherit";
if (document.readyState === 'complete') {
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading white bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
console.log('loading fffwhite bg');
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
console.log('loading black bg');
}
}
});
window.addEventListener('beforeunload', function (e) {
$('body').css({ background: ''});
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
document.body.style.backgroundColor = "#FFF";
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
document.body.style.backgroundColor = "#0a0a0a";
}
document.body.style.backgroundColor = "inherit";
overloadBG();
});
window.onbeforeunload = function () {
//FUCK YOU BLINK
//$('body').css({ background: 'none'});
$('body').css({ background: ''});
document.body.style.backgroundColor = "";
if (typeof (Storage) !=="undefined") {
if (localStorage.themepref == 1 ) {
localStorage.themepref = 1;
lightmode();
}
else {
darkmode();
localStorage.themepref = 2;
}
}
}
document.onreadystatechange = function() {
$('body').css({ background: ''});
document.body.style.backgroundColor = "transparent";
if (event.target.readyState === 'interactive') {
console.log('interactive');
if(lightmodeON === true) {
$('body').css({background: "#FFF"});
}
if(lightmodeON === false) {
$('body').css({background: "#0a0a0a"});
}
}
if (event.target.readyState === 'loading') {
$('body').css({ background: ''});
if(lightmodeON == true) {
$('body').css({background: "#FFF"});
$("body").css("cssText", "background: #FFF !important;");
}
if(lightmodeON == false) {
$('body').css({background: "#0a0a0a"});
$("body").css("cssText", "background: #0a0a0a !important;");
}
}
最佳答案
当 DOMContentLoaded 触发时，浏览器可能已经绘制了您页面的背景。
这是一个无限期地重新加载页面的演示，一定要在看完后点击“隐藏结果”，它可能会使您的计算机占用一些 CPU 资源(但不会占用网络资源)。
/*
We use an iframe to avoid making real network requests
Below is the HTML content of this iframe
*/
const content = `<!DOCTYPE html>
<html>
<head>
<style>
/* default bg color */
body { background: red; }
</style>
<script>
document.addEventListener('DOMContentLoaded', e => {
document.body.style.backgroundColor = 'green';
location.reload() // infinite reload...
});
<\/script>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit cursus orci ut maximus. Phasellus pharetra lobortis pellentesque. Pellentesque et lacus et lorem facilisis ultrices. Maecenas sed ultricies nisi. Suspendisse feugiat finibus justo, id consectetur turpis aliquam ac. Proin sit amet laoreet velit. Nullam felis lectus, commodo imperdiet mollis in, ullamcorper eget tortor. Nullam at metus non diam faucibus aliquam. Vestibulum eu maximus risus, vitae elementum justo. Fusce commodo lacus a augue lobortis, quis ornare odio gravida. Quisque ultrices tempus tellus, vitae pulvinar est rutrum in. Duis ante erat, placerat sit amet imperdiet vitae, facilisis non mauris. Integer eu ex sapien.</p>
<p>Morbi porttitor justo eu sodales efficitur. Integer ut suscipit libero, sed dapibus velit. Vestibulum laoreet neque ac odio consequat, a suscipit arcu tristique. Curabitur tempor, nisl eu porttitor feugiat, nibh lorem laoreet massa, ut porta tellus augue accumsan metus. Suspendisse sed venenatis neque. Aliquam non justo in tortor dictum suscipit. Duis eu lectus eu dui placerat luctus. Etiam et volutpat diam, nec ullamcorper tellus. Nullam nibh dui, bibendum a ipsum et, elementum tempor mi. Maecenas ut eros eu sem malesuada tincidunt. Aenean fermentum sit amet augue quis vulputate. Vivamus commodo pellentesque purus rhoncus suscipit. Proin et enim vel ipsum vulputate mollis venenatis ut enim. Curabitur eget velit mollis, luctus sem at, aliquam est. Donec quis elit erat. Nullam facilisis lorem nisl, a luctus purus tristique vel.</p>
<p>Donec in magna at ante mollis sodales ac vitae mauris. Aliquam condimentum ligula nulla, scelerisque cursus neque consequat quis. Fusce vestibulum nisi vitae ipsum venenatis, a pharetra diam tempus. Aenean maximus enim orci, quis mollis neque sollicitudin et. Quisque viverra ipsum vitae magna varius, id ornare justo dictum. Quisque eleifend magna ac congue dignissim. Duis eu volutpat quam, quis placerat tellus. Pellentesque felis mi, imperdiet eu semper vel, hendrerit sit amet ex.</p>
</div>
</body>
</html>
`;
frame.src = URL.createObjectURL(new Blob([content], {type: 'text/html'}));<iframe id="frame" widht="500" height="500"></iframe>
要解决此问题，请将您的脚本移动到 <body> 的顶部并设置初始 <body> 尽快从存储中取出颜色。
在附加其他事件之前，您仍然可以等待文档准备就绪。
/*
We use an iframe to avoid making real network requests
Below is the HTML content of this iframe
*/
const content = `<!DOCTYPE html>
<html>
<head>
<style>
/* default bg color */
body { background: red; }
</style>
</head>
<body>
<!-- move inside <body> -->
<script>
// first retrieve from Storage
// const lightModeOn = locaStorage.getItem('lightmode') === "1";
// StackSnippets don't allow Storage...
const lightModeOn = true;
// set directly the body's style, we're in so we don't need to wait, it's already available
document.body.style.backgroundColor = 'green';
// then wait for DOMContentLoaded if you wish to add listeners to other events
document.addEventListener('DOMContentLoaded', e => {
// $('.toggle').on('input', switchLight);
// just to demonstrate it works
location.reload();
});
<\/script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit cursus orci ut maximus. Phasellus pharetra lobortis pellentesque. Pellentesque et lacus et lorem facilisis ultrices. Maecenas sed ultricies nisi. Suspendisse feugiat finibus justo, id consectetur turpis aliquam ac. Proin sit amet laoreet velit. Nullam felis lectus, commodo imperdiet mollis in, ullamcorper eget tortor. Nullam at metus non diam faucibus aliquam. Vestibulum eu maximus risus, vitae elementum justo. Fusce commodo lacus a augue lobortis, quis ornare odio gravida. Quisque ultrices tempus tellus, vitae pulvinar est rutrum in. Duis ante erat, placerat sit amet imperdiet vitae, facilisis non mauris. Integer eu ex sapien.</p>
<p>Morbi porttitor justo eu sodales efficitur. Integer ut suscipit libero, sed dapibus velit. Vestibulum laoreet neque ac odio consequat, a suscipit arcu tristique. Curabitur tempor, nisl eu porttitor feugiat, nibh lorem laoreet massa, ut porta tellus augue accumsan metus. Suspendisse sed venenatis neque. Aliquam non justo in tortor dictum suscipit. Duis eu lectus eu dui placerat luctus. Etiam et volutpat diam, nec ullamcorper tellus. Nullam nibh dui, bibendum a ipsum et, elementum tempor mi. Maecenas ut eros eu sem malesuada tincidunt. Aenean fermentum sit amet augue quis vulputate. Vivamus commodo pellentesque purus rhoncus suscipit. Proin et enim vel ipsum vulputate mollis venenatis ut enim. Curabitur eget velit mollis, luctus sem at, aliquam est. Donec quis elit erat. Nullam facilisis lorem nisl, a luctus purus tristique vel.</p>
<p>Donec in magna at ante mollis sodales ac vitae mauris. Aliquam condimentum ligula nulla, scelerisque cursus neque consequat quis. Fusce vestibulum nisi vitae ipsum venenatis, a pharetra diam tempus. Aenean maximus enim orci, quis mollis neque sollicitudin et. Quisque viverra ipsum vitae magna varius, id ornare justo dictum. Quisque eleifend magna ac congue dignissim. Duis eu volutpat quam, quis placerat tellus. Pellentesque felis mi, imperdiet eu semper vel, hendrerit sit amet ex.</p>
</div>
</body>
</html>
`;
frame.src = URL.createObjectURL(new Blob([content], {type: 'text/html'}));<iframe id="frame" widht="500" height="500"></iframe>
关于javascript - DOM 背景颜色传播闪烁继承 Google Chrome 中的初始背景颜色，使用主题切换来重载主体背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57666206/
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
作为我的Rails应用程序的一部分，我编写了一个小导入程序，它从我们的LDAP系统中吸取数据并将其塞入一个用户表中。不幸的是，与LDAP相关的代码在遍历我们的32K用户时泄漏了大量内存，我一直无法弄清楚如何解决这个问题。这个问题似乎在某种程度上与LDAP库有关，因为当我删除对LDAP内容的调用时，内存使用情况会很好地稳定下来。此外，不断增加的对象是Net::BER::BerIdentifiedString和Net::BER::BerIdentifiedArray，它们都是LDAP库的一部分。当我运行导入时，内存使用量最终达到超过1GB的峰值。如果问题存在，我需要找到一些方法来更正我的代
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只
我正在使用active_admin，我在Rails3应用程序的应用程序中有一个目录管理，其中包含模型和页面的声明。时不时地我也有一个类，当那个类有一个常量时，就像这样:classFooBAR="bar"end然后，我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗？ 最佳答案 在纯Ruby中:classA