Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Cookie/Jar.php on line 63

Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Cookie/Jar.php on line 73

Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Cookie/Jar.php on line 89

Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Cookie/Jar.php on line 102

Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Cookie/Jar.php on line 111

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82

Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /home2/justin/public_html/bootplate/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91
Lazy-Load Images | Bootplate

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.