I. 介绍骨架屏
定义
骨架屏是一个简单的占位图，用于在内容加载过程中给用户展示一个占位界面，让用户知道正在加载中。
产生背景
随着Web应用日益复杂，加载时间相应增长，用户往往需要很长时间才能看到完整的界面；而骨架屏就是为了缩短加载时间，提升用户体验而产生的。
II. 骨架屏的设计原则
模拟真实界面
骨架屏要体现完整的页面结构，并模拟真实的UI元素，使用户能够快速熟悉页面内容。
简单设计
骨架屏要避免过于花哨的设计，保持简洁，以提高用户的可读性和认知可靠性。
可重复使用
骨架屏应该可以在多个页面内使用，以避免在每个页面上使用不同的骨架屏，这样可以提高设计和开发效率。
III. 骨架屏的实现
使用CSS和JavaScript
使用CSS和JavaScript实现骨架屏是最常见的一种方法，通过隐藏或展示元素，以达到占位或显示的效果。
<!DOCTYPE html> <html> <head> <title>骨架屏实现demo</title> <style> .container { padding: 10px; } .skeleton { height: 50px; margin-bottom: 10px; background-color: #ddd; border-radius: 5px; animation: loading 1s ease-in-out infinite; } @keyframes loading { from { background-position: 0 0; } to { background-position: 100% 0; } } </style> </head> <body> <div class="container"> <div class="skeleton"></div> <div class="skeleton"></div> <div class="skeleton"></div> <div class="skeleton"></div> <div class="skeleton"></div> </div> <script> window.addEventListener('load', function() { var skeletonBlocks = document.querySelectorAll('.skeleton'); skeletonBlocks.forEach(function(block) { block.style.width = block.offsetWidth + 'px'; }); }); </script> </body> </html>
预渲染技术
通过预渲染技术，将骨架屏作为静态页面一并传送给浏览器，以缩短页面加载时间。
<!DOCTYPE html> <html> <head> <title>骨架屏预渲染实现</title> <style> #container { padding: 10px; } .skeleton { height: 50px; margin-bottom: 10px; background-color: #ddd; border-radius: 5px; animation: loading 1s ease-in-out infinite; } @keyframes loading { from { background-position: 0 0; } to { background-position: 100% 0; } } </style> </head> <body> <div id="container"> <div class="skeleton"></div> <div class="skeleton"></div> <div class="skeleton"></div> <div class="skeleton"></div> <div class="skeleton"></div> </div> <div id="content" style="display: none;"> <!-- 正常内容 --> <p>这里是正常的内容</p> </div> <script type="text/javascript"> window.onload = function(){ setTimeout(()=>{ document.getElementById('container').style.display = 'none'; document.getElementById('content').style.display = 'block'; },1500) } </script> </body> </html>
模板
通过使用模板，可以更容易地生成骨架屏，以加快页面加载时间。
小程序
vant weapp Skeleton 骨架屏
IV. 骨架屏的优势
缩短加载时间
骨架屏可以吸引用户的眼球，与此同时，让用户感受到页面正在加载中，从而减少用户的焦虑感，提升用户对应用体验的满意度。
提高用户留存率
大多数用户并不在意应用程序加载的快慢，但往往会因为等待时间长而放弃访问或离开应用程序。因此，骨架屏可以大大降低用户的流失率。
提高品牌认知度
通过设计良好的骨架屏，可以提高用户对于品牌的认知度，进而增加品牌的知名度和信誉度。
V. 结论
骨架屏的应用逐渐成为设计和开发中的一项重要技术，它可以缩短页面加载时间，提升用户体验，同时还可以增加品牌认知度。
