client:visible for viewport-based loading in Astro - Mini Project: Build & Apply

Lazy Load Images with Astro's client:visible

📖 Scenario: You are building a simple webpage that shows a list of images. To improve performance, you want each image to load only when it scrolls into the user's view.

🎯 Goal: Create an Astro component that uses client:visible to lazy load images as they appear in the viewport.

📋 What You'll Learn

Create an array of image URLs in Astro frontmatter

Add a variable to hold the image width for consistent sizing

Use client:visible on the image component to load images only when visible

Complete the Astro component with proper HTML structure and accessibility

💡 Why This Matters

🌍 Real World

Lazy loading images improves website speed and user experience by loading images only when needed, saving bandwidth and reducing initial load time.

💼 Career

Understanding client directives like client:visible in Astro is important for frontend developers to optimize performance and build modern, efficient web applications.

1

Set up the image URLs array

In the frontmatter of your Astro component, create a constant called imageUrls that is an array containing these exact strings: "/images/photo1.jpg", "/images/photo2.jpg", "/images/photo3.jpg".

Astro

---
const imageUrls = [
  // Your code here
]
---

Hint

Use square brackets to create an array and include the exact image paths as strings.

2

Add image width configuration

Below the imageUrls array, create a constant called imageWidth and set it to 300 to define the width for all images.

Astro

---
const imageUrls = [
  "/images/photo1.jpg",
  "/images/photo2.jpg",
  "/images/photo3.jpg"
]
const imageWidth = 300
// Your code here
---

Hint

Just add a new constant with the exact name and value.

3

Use client:visible to lazy load images

In the component's HTML, use a {imageUrls.map((url) => ( ... ))} expression to loop over imageUrls. Inside the loop, create an <img> tag with src={url}, width={imageWidth}, alt="Photo", and add the attribute client:visible to enable lazy loading when the image enters the viewport.

Astro

---
const imageUrls = [
  "/images/photo1.jpg",
  "/images/photo2.jpg",
  "/images/photo3.jpg"
]
const imageWidth = 300
---


  {/* Use map to create img tags with client:visible here */}

Hint

Use curly braces to embed JavaScript expressions in Astro HTML and add client:visible as an attribute on the <img> tag.

4

Complete the Astro component with semantic HTML

Wrap the images inside a <main> tag and add an <h1> heading with the text "Lazy Loaded Gallery" above the images for accessibility and structure.

Astro

---
const imageUrls = [
  "/images/photo1.jpg",
  "/images/photo2.jpg",
  "/images/photo3.jpg"
]
const imageWidth = 300
---



  {/* Your code here */}

Hint

Use semantic tags for better accessibility and structure.

Practice

1. What does the client:visible directive do in Astro?

easy

A. It loads a component only when it appears in the user's viewport.

B. It loads a component immediately when the page loads.

C. It prevents a component from ever loading.

D. It loads a component only on server side.

Solution

1. Step 1: Understand the purpose of client:visible

   This directive delays loading until the component is visible on screen, saving resources.

2. Step 2: Compare options with this behavior

   Only It loads a component only when it appears in the user's viewport. matches this behavior; others describe immediate or no loading.

3. Final Answer:

   It loads a component only when it appears in the user's viewport. -> Option A

4. Quick Check:

   client:visible = loads on viewport [OK]

Hint: Remember: client:visible means load when visible on screen [OK]

Common Mistakes:

• Thinking it loads immediately on page load
• Confusing with server-side loading
• Assuming it never loads the component

2. Which of the following is the correct syntax to load a component only when visible using Astro?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Astro client directives

   Astro uses client:visible to load components on visibility.

2. Step 2: Match syntax with directive

   Only uses client:visible correctly in JSX-like syntax.

3. Final Answer:

   <Component client:visible /> -> Option B

4. Quick Check:

   Correct directive syntax = [OK]

Hint: Use client:visible exactly as attribute on component [OK]

Common Mistakes:

• Using client:load instead of client:visible
• Confusing with client:idle or client:only
• Missing the colon in client:visible

3. Given this Astro code snippet, what will happen when the page loads?

<Image src="photo.jpg" alt="Photo" client:visible />

medium

A. The image never loads.

B. The image loads immediately when the page loads.

C. The image loads only when it scrolls into the viewport.

D. The image loads only after a user clicks it.

Solution

1. Step 1: Understand client:visible effect on image

   The image will not load immediately but waits until visible on screen.

2. Step 2: Analyze options for loading behavior

   The image loads only when it scrolls into the viewport. correctly states loading on scroll into viewport; others are incorrect.

3. Final Answer:

   The image loads only when it scrolls into the viewport. -> Option C

4. Quick Check:

   client:visible delays load until visible [OK]

Hint: client:visible delays loading until visible on screen [OK]

Common Mistakes:

• Assuming image loads immediately
• Thinking it loads on click
• Believing it never loads

4. Identify the error in this Astro component usage:

<Video src="movie.mp4" client-visible />

medium

A. The src attribute is missing.

B. The directive client-visible is correct syntax.

C. The component tag should be self-closing with a slash at the end.

D. The directive should be client:visible with a colon, not a dash.

Solution

1. Step 1: Check directive syntax

   Astro directives use colon, so client:visible is correct, not client-visible.

2. Step 2: Verify other attributes and syntax

   The src attribute is present, and self-closing slash is optional in JSX-like syntax.

3. Final Answer:

   The directive should be client:visible with a colon, not a dash. -> Option D

4. Quick Check:

   Directive syntax requires colon, not dash [OK]

Hint: Use colon in client:visible, not dash [OK]

Common Mistakes:

• Using dash instead of colon in directive
• Thinking self-closing slash is mandatory
• Missing src attribute (which is present here)

5. You want to optimize a page with many interactive widgets using client:visible. Which approach best improves performance without hurting user experience?

hard

A. Apply client:visible only to widgets below the fold, load above-the-fold normally.

B. Apply client:visible to all widgets, including those visible on initial load.

C. Avoid using client:visible and load all widgets immediately.

D. Use client:visible only on images, not interactive widgets.

Solution

1. Step 1: Consider user experience for above-the-fold content

   Widgets visible immediately should load right away for smooth interaction.

2. Step 2: Use client:visible for below-the-fold widgets

   Delaying load for widgets off-screen saves data and speeds initial load.

3. Step 3: Evaluate options

   Apply client:visible only to widgets below the fold, load above-the-fold normally. balances performance and experience; others either delay too much or avoid optimization.

4. Final Answer:

   Apply client:visible only to widgets below the fold, load above-the-fold normally. -> Option A

5. Quick Check:

   Optimize below fold with client:visible, load above fold immediately [OK]

Hint: Use client:visible only for off-screen widgets to keep UX smooth [OK]

Common Mistakes:

• Applying client:visible to all widgets including visible ones
• Not using client:visible at all
• Limiting client:visible only to images