如何实现YouTube加载时的灰色占位框？是否采用懒加载、JavaScript？

Great question! Let’s unpack what’s going on with those gray placeholders you see on YouTube before content loads:

• First off, those gray boxes are called skeleton loaders (or skeleton screens), and they absolutely tie into lazy loading—but they’re more of a perceived performance optimization that works alongside lazy loading, not just lazy loading itself.

• It’s not just JavaScript doing all the work; it’s a team effort of HTML, CSS, and JS:

  1. Initial Render (CSS/HTML First)
     When you first load the page, YouTube sends down HTML that already includes the structure of the skeleton placeholders. CSS styles these elements to match the layout of real content—think rounded rectangles for thumbnails, short horizontal bars for titles, circular shapes for channel avatars—all with that gray background. This happens before any heavy JS loads, so you see the placeholder layout instantly instead of a blank page.
  2. JavaScript-Powered Lazy Loading
     Once the page is ready, JS takes over to handle the actual content loading. It watches for when skeleton elements enter the viewport (or uses preloading logic for content near the viewport), then fetches the real data (thumbnail images, video titles, channel info) and replaces the skeleton placeholders with the actual content as it loads.

• To clarify: This isn’t just "lazy loading" in the traditional sense (where you load content only when needed). The skeleton screen is there to keep the page layout stable and reduce user frustration while the real content loads in the background.

So in short: Yes, lazy loading is a core part of this system, but the gray placeholders themselves are a CSS-driven skeleton layout that works with JavaScript to load and swap in real content once it’s ready.

内容的提问来源于stack exchange，提问作者allenski