Skip to content

Commit

Permalink
chore: update lazy/eager loading docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ralphjsmit committed Nov 1, 2023
1 parent 0b2b4fe commit ee9e10f
Showing 1 changed file with 8 additions and 5 deletions.
13 changes: 8 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ Under the hood, this will be **converted to the following** output:
https://your-app.com/glide/img/my-huge-image.png?width=2500 2500w,
...
"
loading="lazy"
alt="Some alt text"
/>
```
Expand Down Expand Up @@ -78,6 +79,7 @@ This will output the image variations up to the last version that fits inside th
https://your-app.com/glide/img/my-huge-image.png?width=800 800w,
https://your-app.com/glide/img/my-huge-image.png?width=1000 1000w,
"
loading="lazy"
alt="Some alt text"
/>
```
Expand All @@ -101,18 +103,19 @@ Which will result in:
https://your-app.com/glide/img/my-huge-image.png?width=1000 1000w,
"
sizes="(max-width: 500px) 100vw, 50vw"
loading="lazy"
alt="Some alt text"
/>
```

### Lazy loading images
### Eager loading images

HTML allows for a native way to lazy load images if they are below the fold. This reduces the initial page size and speeds up the page load.
HTML allows for a native way to lazy load images if they are below the fold. This reduces the initial page size and speeds up the page load. Lazy loading for images is enabled by default for URLs outputted by Glide.

You may enable this parameter by passing `true` to the `lazy` parameter in the `glide()->src()` function:
However, if you need to eager load an image, you can pass `lazy: false` to disable lazy loading for an image. You should only do this for images that are above the fold on initial page load, otherwise it will slow down your page unnecessarily.

```blade
<img {{ glide()->src('img/my-huge-image.png', 1000, sizes: '(max-width: 500px) 100vw, 50vw', lazy: true) }} alt="Some alt text" />
<img {{ glide()->src('img/my-huge-image.png', 1000, sizes: '(max-width: 500px) 100vw, 50vw', lazy: false) }} alt="Some alt text" />
```

Which will result in:
Expand All @@ -126,7 +129,7 @@ Which will result in:
https://your-app.com/glide/img/my-huge-image.png?width=1000 1000w,
"
sizes="(max-width: 500px) 100vw, 50vw"
loading="lazy"
<!-- Loading attribute is omitted, so it will be eager loaded -->
alt="Some alt text"
/>
Expand Down

0 comments on commit ee9e10f

Please sign in to comment.