Lazy-Load Images

For performance reasons, it’s not a good idea to waste time rending stuff that the user can’t even see (not in the viewport). Bootplate (as of v0.5) comes with lazy-loading scripts that defers downloading of images with class .lazy until they are in the viewport. At that point, the placeholder image is replaced with the actual image dynamically as soon as the browser has downloaded it.

This feature uses the (awesome) jQuery plugin, jQuery Lazy Load by Mika Tuupola. Learn more in the project’s GitHub repo, but you can see it in action below.

Lazy-Load Demo

Below, you’ll find a whole series of Bootstrap v4 cards with images that are “lazy-loaded” as they enter your viewport. Scroll down pretty fast and you’ll see the image appear as you scroll. Once downloaded, the images stay as they are.

Card Image

Card Title 1 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 2 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 3 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 4 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 5 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 6 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 7 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 8 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 9 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 10 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 11 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.

Card Image

Card Title 12 Subtitle Goes Here

This is the card body text. You can put pretty much anything here, but don’t go too crazy.