Scribd
Upload
16 views

Lazy Loading

Uploaded by

dod85202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

Lazy Loading

Uploaded by

dod85202
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Lazy Loading

What is lazy loading ?


Lazy loading is the practice of delaying load or
initialization of resources or objects until they’re actually
needed to improve performance and save system
resources. For example, if a web page has an image that
the user has to scroll down to see, you can display a
placeholder and lazy load the full image only when the
user arrives to its location.

1
Benefits Of Lazy Loading :
• Reduces initial load time : Lazy loading a webpage reduces
page weight, allowing for a quicker page load time.
• Bandwidth conservation : Lazy loading conserves
bandwidth by delivering content to users only if it’s requested.
• System resource conservation : Lazy loading conserves
both server and client resources, because only some of the
images, JavaScript and other code actually needs to be
rendered or executed.

Lazy Loading vs. Eager


Loading
Lazy loading delays the initialization of a
resource while eager loading initializes or loads
a resource as soon as the code is executed.
Eager loading is beneficial when there is an
opportunity or need to load resources in the
background. For example, some websites
display a “loading” screen and eagerly load all
the resources required for the web application
to run.
2
Lazy Loading Images :
To lazy load an image you can use the loading attribute on an
<img> element can be used to instruct the browser to defer
loading of images that are off-screen until the user scrolls near
them.
Example : <img src="image.jpg" alt="..." loading="lazy" />

Lazy Loading Videos :

For videos where playback is initiated by the user (that


is, videos that don't autoplay), specifying the <preload>
attribute on the <video> element may be desirable:

<video controls preload="none" poster="one-does-not-


simply-placeholder.jpg">
<source src="one-does-not-simply.webm"
type="video/webm">
<source src="one-does-not-simply.mp4"
type="video/mp4">
</video>

You might also like