Lazy loading in Wordpress - Step-by-Step Execution

Concept Flow - Lazy loading

Page starts loading

↓

Images marked for lazy loading

↓

User scrolls down

↓

Check if image is near viewport

Yes↓

Load image source

↓

Image appears on screen

↓

Repeat for next images

↓

Page fully loaded with images as needed

Lazy loading delays loading images until they are about to appear on screen, saving bandwidth and speeding up page start.

Execution Sample

Wordpress

<img src="placeholder.jpg" loading="lazy" data-src="real-image.jpg" alt="Example image">

This HTML marks an image to load lazily, showing a placeholder until the real image is near viewport.

Execution Table

Step	Action	Image State	User Scroll Position	Image Loaded?
1	Page loads with placeholder images	Placeholder shown	Top of page	No
2	User scrolls down near first image	Placeholder shown	Near first image	No
3	Lazy loading triggers	Real image source loaded	Near first image	Yes
4	Image appears on screen	Real image shown	Near first image	Yes
5	User scrolls near second image	Placeholder shown	Near second image	No
6	Lazy loading triggers for second image	Real image source loaded	Near second image	Yes
7	Second image appears on screen	Real image shown	Near second image	Yes
8	User scrolls past all images	All real images shown	Bottom of page	Yes
9	No more images to load	All images loaded	Bottom of page	Yes

💡 All images have been loaded as user scrolled near them, lazy loading complete.

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
Image Source	placeholder.jpg	real-image.jpg (first image)	real-image.jpg (second image)	real-image.jpg (all images)
Image Loaded?	No	Yes (first image)	Yes (second image)	Yes (all images)
User Scroll Position	Top of page	Near first image	Near second image	Bottom of page

Key Moments - 3 Insights

Why does the image show a placeholder first instead of the real image?

Because lazy loading delays loading the real image until the user scrolls near it, as shown in steps 1 and 2 of the execution table.

When exactly does the real image start loading?

The real image starts loading when the user scrolls near it, triggering lazy loading as shown in step 3 and step 6.

What happens if the user never scrolls near an image?

The image stays as the placeholder and the real image never loads, saving bandwidth, as implied by the lazy loading logic in the flow.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the first real image load?

A Step 3

B Step 2

C Step 5

D Step 1

💡 Hint

Check the 'Image Loaded?' column for when it changes to 'Yes' for the first image.

According to the variable tracker, what is the 'Image Source' after step 6?

A placeholder.jpg

B real-image.jpg (second image)

C real-image.jpg (first image)

D No image source

💡 Hint

Look at the 'Image Source' row and the value under 'After Step 6'.

If the user never scrolls, what will be the 'Image Loaded?' state at the end?

A Yes for all images

B Yes for first image only

C No for all images

D Yes for some images

💡 Hint

Refer to the key moment about images not loading if user never scrolls.

Concept Snapshot

Lazy loading delays loading images until needed.
Use loading="lazy" attribute in <img> tags.
Images show placeholders first.
Real images load when near viewport.
Saves bandwidth and speeds page start.
Common in WordPress for better performance.

Full Transcript

Lazy loading in WordPress means images do not load immediately when the page starts. Instead, they show a placeholder image. When the user scrolls near an image, the real image source loads and replaces the placeholder. This saves data and makes the page load faster initially. The process repeats for each image as the user scrolls down. If the user never scrolls near an image, it never loads, saving bandwidth. This is done by adding loading="lazy" to image tags. The execution table shows each step from page load, user scroll, image loading, to all images loaded. The variable tracker shows how image sources and load states change over time. Key moments clarify why placeholders appear first and when images load. The visual quiz tests understanding of these steps.