Lazy Loaded Prefill Embeds

Here's a quick summary:

CodePen offers two types of embeds for your projects:

• Standard Embedded Pens: These are simple to use. You create a Pen on CodePen and then embed it on your website.

• Prefill Embeds: This advanced option eliminates the need to pre-create a Pen on CodePen. You directly embed the HTML, CSS, and JavaScript code within your webpage using code blocks. This allows you to manage your code within your own Git repository or database, providing greater control.

Stephen Shaw demonstrates how to create these Prefill Embeds dynamically. A user interaction (like clicking a button) triggers the embed's creation, making it a lightweight method to add optional interactive elements to articles or documentation. The embed only loads when needed, optimizing page load times.

Let's illustrate with an example:

<h1 id="Hello-from-HTML">Hello from HTML</h1>

html {
  background: black;
  color: white;
  text-align: center;
}

h1::after {
  content: " / CSS!";
}

document.querySelector("h1").innerText  = " / JavaScript";

The code above resides directly within this article. The CodePen iframe only loads when you choose to view the running code (via a "Run this code" button, for instance). This approach keeps the initial page load fast and only adds the interactive element when requested.

Direct Link →

The above is the detailed content of Lazy Loaded Prefill Embeds. For more information, please follow other related articles on the PHP Chinese website!