<img src="xx.png" onload="cssd()">
<div id="csss"></div>
<script>
function cssd(){
document.getElementById("csss").innerHTML='<STYLE>.x{background:#ff0000}</style>'
}
</script>
Please search 安林网络话题社
尊敬的用户，您好！很高兴为您答疑。造成这个问题是因为您js作为解释性代码，其执行是按照输出顺序进行的。而您的要求是不要页面出现没有加载样式之前的状态（出现这个问题主要还是跟各个浏览器的加载渲染机制有关），或者您可以尝试将整个body内的内容都设定为加载样式后再show。
希望我的回答对您有所帮助，如有疑问，欢迎继续咨询我们。
了解 HTML 和 CSS 的渲染原理从以下几方面入手：
html各种渲染都是从浏览器开始的，分为浏览器解析和浏览器渲染两大步骤
一、浏览器解析
1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
2、HTML 文件加载后，开始构建 DOM Tree
3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后， 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree
二、浏览器渲染
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
2、Rendering Tree 并不与 DOM Tree 对应，比如像 <head>标签内容或带有 display: none的元素节点并不包括在 Rendering Tree 中 。
3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。
渲染原理示意图：
