Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to design lazy loading of images/videos for mobiles using jQuery Plugin?
In the present-day world, where mobile devices are dominant, developers are persistently searching for ways to optimize user experience, particularly concerning the loading of hefty media files such as images and videos. One of the remedies to this issue is to implement lazy loading, a technique that procrastinates the loading of non-vital media files until their requirement. With the aid of the jQuery Plugin, developers can effortlessly integrate lazy loading into their mobile web applications, thereby providing an uninterrupted and proficient browsing experience for their users. In this write-up, we shall scrutinize the step-by-step technique to design the lazy loading of images and videos for mobiles using jQuery Plugin, examining the underlying functionality of the framework and the diverse parameters available to personalize its implementation.
Lazy jQuery Plugin
Within jQuery, the "Lazy" addition is utilized for idle loading pictures and further content present on a webpage. This method of delayment in loading of supplementary content, like imagery and video footage, until the user actively requires it, is referred to as lazy loading. It is proven to be an effective means to enhance the overall performance of the webpage and reduce the duration of initial page loading. The Lazy add-on carries out this process by exchanging the image or content's "src" attribute with a substitute image or data attribute, and later loads the content when the user scrolls to that particular segment of the page. Consequently, exclusively the images or content that are visible on the user's screen will be loaded initially, and the rest will be loaded later as needed.
Approach
To implement lazy loading of images and videos for mobile devices using jQuery Plugin, the following approach can be used −
First, ensure that jQuery library is included in the HTML document.
Incorporate the jQuery Lazy Extension, which can be acquired by means of transfer from the certified jQuery Extension archive.
Incorporate the "data-src" characteristic to the HTML tags of the illustrations and motion pictures that you intend to load in a sluggish manner. This characteristic ought to encompass the Uniform Resource Locator of the illustration or motion picture to be uploaded once the aspect is perceptible in the visual field.
Use jQuery to select the images and videos that have the "data-src" attribute and initialize the Lazy Plugin on them.
The Lazy Extension shall instinctively identify the occurrence of a picture or video entering the purview and switch the "data-src" characteristic with the "src" characteristic. This substitution shall result in the loading of the multimedia file.
Furthermore, you hold the capability to configure preferences for the Lazy Plugin, like the limit for triggering image downloads and the display of the loading animation during the course of image downloads.
Example
Following HTML code implements lazy loading of images and videos for mobile devices using a jQuery Plugin. It includes external script files for jQuery and the jQuery.lazyload plugin, as well as CSS styles to format the page layout. The 'lazy' class is used to display a box with specific dimensions and style, containing an image with the 'data-original' attribute that specifies the URL for lazy loading. The jQuery script applies the lazyload() method with the fadeIn effect to all images with the 'lazy' class. Lazy loading is a technique that improves loading speed by deferring the loading of images and videos until they are needed, and the plugin ensures they are loaded only when visible on the screen, resulting in a faster and smoother user experience, especially on mobile devices.
<!DOCTYPE html>
<html>
<head>
<title>How to design lazy loading of images/videos for mobiles using jQuery Plugin?</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 10px;
padding: 0;
}
.container {
margin: 50px auto;
max-width: 800px;
padding: 0 20px;
}
.lazy {
background-color: #f7f7f7;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
height: 300px;
overflow: hidden;
position: relative;
width: 100%;
}
.lazy img {
display: block;
height: auto;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h4>How to design lazy loading of images/videos for mobiles using jQuery Plugin?</h4>
<div class="container">
<div class="lazy">
<img class="lazy" data-original="https://picsum.photos/id/237/800/300" alt="Lazy-loaded image" />
</div>
</div>
<script>
$(function () {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
</html>
Conclusion
In summation, the execution of inactive loading for images and videos on portable devices has the potential to significantly enhance the user involvement by diminishing the loading duration and refining efficiency. By utilizing the jQuery Plugin, programmers can effortlessly merge inactive loading into their websites and applications, furnishing a cohesive and proficient exploration experience for their consumers. By embracing this method, we not only have the capacity to enrich the admittance and usefulness of our portable web content, but we can also lessen data usage and enhance the overall pace of the website. Hence, it is critical for web developers to acquaint themselves with the benefits of inactive loading and incorporate it into their blueprint methodology.
186 Views
