From the course: Livewire Essential Training
Join today to access over 24,400 courses taught by industry experts.
Lazy loading
From the course: Livewire Essential Training
Lazy loading
Lazy loading is a pretty common concept when it comes to images on the web. The idea being that an image isn't loaded until in the viewport. This helps the page render faster. Livewire extends the concept of lazy loading to any component. Here is the CoinFlip component I've been demoing throughout the course. Obviously, the PHP random function is quick, but I want you to imagine instead of flipping a coin, that this is making a call to a slow DB or hitting some external API. To emulate that, I'll add a sleep before the flip. Two seconds should be long enough. And I'm also going to add the mount method back to this. Because all the important logic is in the flip method, mount just has to call flip. Start up our server. Now when I load the page, notice it takes a couple of seconds. And when I click flip, you'll also note the two-second sleep is much slower than it used to function. I'm going to enable lazy loading on this component. To do that, I need to add an attribute in the markup…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
