标签: fouc
推荐指数
解决办法
查看次数
AngularJS策略,以防止类的内容闪现内容
我有一个AngularJS项目,我想在页面加载类名时阻止FOUC.我读过关于ng-template的内容,但这似乎只对标签内的内容有用.
<body class="{{ bodyClass }}">
我想在页面加载时"登录".对此有何策略？或者我只需要捏造它并将其加载为"登录"并手动使用javascript来为此实例调整DOM.
推荐指数
解决办法
查看次数
如何在使用webpack加载的css时停止FOUC
我在使用webpack时在我的入口点内加载css时得到了FOUC.如果我从webpack中删除我的css并将其作为普通链接包含在我的html文件中,那么FOUC的问题就会消失.
注意:这不仅仅是使用bootstrap框架,我已经使用Foundation和Materialize测试了相同的结果
下面发布的代码只是我使用Bootstrap的问题的一个测试示例.
Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
</div>
</div> <!-- /container -->
<script src="build/bundle.js"></script>
</body>
</html>
bootstrap.js主要入口点
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import bootstrap from 'bootstrap'
$(document).ready(function () {
console.log('bootstrap loaded')
});
webpack.config.js
var path = require('path');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const webpack = require("webpack");
module.exports = {
entry: './src/bootstrap.js',
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", …推荐指数
解决办法
查看次数
仅在Firefox中使用无格式内容(FOUC)的Flash？FF缓慢渲染？
我没有在我测试的任何其他浏览器中看到这个问题 - IE,Chrome,Opera - 但每当我从服务器加载页面时,我都会在应用CSS之前看到一些没有样式的内容.
这甚至发生在后续的页面加载中,其中所有内容都应该被缓存 - 每次页面加载时我都会看到非常规内容的瞬间,然后一切都安定下来.
也值得注意(也许？)该页面正在使用@ font-face来提取一些Google字体.它们存储在单独的样式表中,在主要的响应式样式表和媒体查询之后被拉出.
我尝试了一些不同的东西,没有效果:
- 重新排列CSS样式表链接的顺序
- 使用@ font-face删除样式表的链接
- 禁用Firebug？(在这里读到......)
可能值得一提的另一件事是我在页面的CSS中使用了很多Element Type CSS选择器.这是否有可能减慢渲染过程？
这似乎不太可能,因为在改变窗口的尺寸时立即重新渲染页面没有问题 - 响应的东西立刻变得很好.
所以这让我相信CSS的加载方式存在一些问题.
这是我的HEAD代码:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" …推荐指数
解决办法
查看次数
在输入字段中使用"自动对焦"时,Firefox中无格式内容(FOUC)的Flash
实际上,这更像是一个错误描述而不是一个问题.
我在一个非常简单的登录页面上注意到Firefox中无格式内容(FOUC)的闪现.没有使用图像.没有沉重的CSS.所有Javascript都放在代码的末尾,就在关闭正文标记之前.但是当页面加载时,Firefox显示一个完全没有样式的页面大约100毫秒,然后css生效.这种情况每次都会发生,毫无例外.
我发现有一些黑客可以解决这个问题:只需添加一个<script>元素<head>,将你喜欢的任何javascript代码放入其中,甚至是简单的评论和 - bam!- 问题解决了.像这样:
<script>/* foo */</script>
FOUC的实际原因似乎是将autofocus属性与其中一个表单字段一起使用.因此,删除"自动对焦"也可以解决问题.
这不是很奇怪吗？
有人知道比我更好的解决方案吗？
推荐指数
解决办法
查看次数
使用 Mantine 用于 Nextjs 的无样式内容 Flash (FOUC)
我切换到Mantine并按照这种方法解决了FART（不准确的颜色主题的Flash），但网页遇到了新问题。在页面渲染之前，会出现一闪而过的 Unstyled 组件。如何解决这个问题？我查看了 Nextjs Github，发现有一些 FOUC 问题，但解决方案是添加<script>0</script>，这对我来说不起作用。
此错误仅在生产中存在，在开发中它工作正常。
示例： https: //gotrip.vercel.app 如果您没有看到 Flash，请复制链接并将其粘贴到浏览器中。
import Document, { Html, Head, Main, NextScript } from "next/document";
import { createGetInitialProps } from "@mantine/next";
const getInitialProps = createGetInitialProps();
export default class _Document extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...getInitialProps, ...initialProps };
}
render() {
const setInitialTheme = `
function getUserPreference() {
if(window.localStorage.getItem('theme')) {
return window.localStorage.getItem('theme')
}
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light' …推荐指数
解决办法
查看次数
如何在CSS表中使用固定宽度的单元格来避免"Flash of Unstyled Content"？
我的Web GUI布局部分由CSS表驱动.这主要是因为我希望"细胞"在所有情况下具有相同的高度,而没有任何围绕对齐的大量头痛.总的来说,这种方法非常成功.
但是,我确实有一个问题,即表中的右侧单元格有时需要花费一些时间来渲染,导致左侧单元格短暂地占据页面宽度的100%.这会产生明显的"闪烁"效果,虽然很小,但却很烦人.我决定解决它.
这是我的页面工作方式的模糊表示:
#tbl { display: table; width: 200px; border: 1px solid black; }
#tbl-row { display: table-row; }
#tbl-col1,
#tbl-col2 { display: table-cell; }
#tbl-col1 { width: 50px; background-color: red; }
#tbl-col2 { background-color: blue; }<div id="tbl">
<div id="tbl-row">
<div id="tbl-col1">LHS</div>
<div id="tbl-col2">RHS</div>
</div>
</div>一切都很好,直到你使用你的开发人员工具给出#tbl-col2一个display: none指令,[我希望准确] #tbl-col1在渲染和#tbl-col2渲染之间的瞬间模拟浏览器渲染引擎的状态.
请注意#tbl-col1,尽管我已经给出了宽度,但它会立即占据桌子宽度的100%.我理解为什么会发生这种情况:毕竟,我已经要求浏览器使其div表现得像表格.不过,这在这里是不可取的.
我试图通过插入"spacer"来解决这个问题,希望没有width它会扩展以填充右侧的所有空间,直到右侧得到渲染为止:
#tbl { display: table; width: 200px; border: 1px …推荐指数
解决办法
查看次数
AngularJS:如何在加载时阻止页面中的"代码闪存"
我使用AngularJS创建了一个简单的应用程序.当我打开页面一秒钟时,我会看到下面的屏幕:
但是,在加载完成后,我看到加载和样式化的内容很好:
如何防止页面上的AngularJS代码闪存？这与FOUC有关吗？
这是HTML代码:
<!doctype html>
<html class="no-js" lang="en" ng-app="MainApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<style>
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
</head>
<body ng-controller="MainCtrl">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="left tab-bar-section">
<h1 class="title">Salary Calculator</h1>
</section>
</nav>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Location</label>
</li>
<li><a href="#">United Kingdom</a>
</li>
</ul>
</aside>
<section …推荐指数
解决办法
查看次数
Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 不在index.html 上添加链接标签
我尝试使用 Webpack5 + MiniCssExtractPlugin + html-webpack-plugin 和其他插件构建生产环境，但我无法将 css 标签包含在 index.html 中。
每次 css 文件由 javascript 附加时，都会出现“无样式内容的闪存”(FOUC) 问题。
我使用npm run build和这个简单的命令：webpack --config webpack.prod.js
webpack.prod.js
const path = require('path');
const common = require('./webpack.config');
const { merge } = require('webpack-merge');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(common,{
mode: 'production',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '',
filename: '[name].[hash].js',
},
plugins: [
new CleanWebpackPlugin({}),
new MiniCssExtractPlugin({
filename:'[name].[hash].css'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: …推荐指数
解决办法
查看次数
在jekyll中实现一个黑暗的主题
我正在尝试添加一个简单的亮/暗模式切换到我的Jekyll网站.
我现在设置它的方式是,正文有一个dark类切换到light切换类,并且localStorage只要用户进入新页面,主题就会保留并加载.该SCSS只是有选择的.dark,并.light会显示相应的配色方案.
这种方法的问题是我的默认主题是dark,所以如果主题被设置为,当light类切换dark到light我加载新页面时,有一个非常清晰的.2秒闪存.
我已经尝试通过设置主体visibilty来解决问题,hidden然后visible在切换完成后重新设置它,但遗憾的是这种方法引入了另一个恼人的闪存/延迟,并且没有好办法阻止它在每个页面加载时闪烁.
我想到的一些潜在解决方案,但不知道它们是否可行或如何实现它们是:
- 让Jekyll以某种方式读取
localStorage和更改基于它的呈现HTML的类(可能是最好的解决方案,但也可能不可能) 不知何故让Jekyll从SCSS生成两个单独的样式表,并使用JS来选择正确的样式表
非常感谢有关如何做这些事情或潜在替代解决方案的任何见解,谢谢!
推荐指数
解决办法
查看次数