本文介绍了在前端开发中如何创建页面加载效果以提升用户体验。通过在页面上层添加加载动画的“画布”，并利用document.onreadystatechange和document.readyState来检测资源加载状态，以确保资源完全加载后才显示页面。避免使用定时器，以防止用户不必要的等待。
咱们在做前台页面开发的时候经常会遇到一种场景，那就是页面需要加载大数据量的资源。比如做一个相册，视频网站等等。如果这时候在进入页面的时候不做处理，那给用户展现的就是漫长而无聊的等待，用户体验性相当不好。因此在这介绍常见的页面加载效果如何制作.
制作思路如下：1.在要显示的页面上层添加“画布”，当用户进入页面的时候只能看到这层画布，它用于展示加载中的动画。 2.页面自动检测资源是否已经全部加载完成，当加载完成时隐藏“画布”，展示页面.
误区： 往往有人在做这个效果的时候会使用定时器，即自己估算一个保守的时间，然后用定时器来记时，当记时完成隐藏”画布”。这种方式往往也能达到效果，但缺点是就算页面提前加载完成用户也必须要等待这么长时间。
正确做法：
利用document.onreadystatechange+document.readystate来完成。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 画布 */
.loadding{
最低0.47元/天 解锁文章
1932
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
