27th Sep - Lazy load images using jQuery ~ Linchakin

In this article, we will create lazy load images with the help of jQuery. In the beginning of this article, we will learn the basics of jQuery. After that we will learn the basics of lazy load images.

What is jQuery?

JQuery is a fast, lightweight, small, and feature-rich JavaScript library. For adding jQuery in the HTML page we can use the <script> tag.

In this, the src attribute is where we can add the source of jQuery.

You can also download the jQuery and add the source of jQuery in the src attribute of the <script> tag.

What do you mean by lazy load images in jQuery?

In jQuery, Lazy Load Images is a set of techniques in web and application that delaying the loading of images on a page to a later point in time - when those images are actually needed. With the use of this functionality, we can reduce the initial loading time of a web page.

Let's take the various examples of lazy load images using jQuery.

Example 1:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width = device-width, initial-scale=1.0"> <title> Example lazy load images using jQuery </title> </head> <style> @import url(https://ift.tt/3APlVA7); @import url(https://ift.tt/39JB3mQ); h1 { line-height: 2em; padding-bottom: 15px; text-transform: none; font-size: 2em; font-weight: bold; font-style: italic; font-family: "Playfair Display", "Bookman", serif; color: #999; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } body { height: 100%; width: 100%; background-image: linear-gradient(to right, firebrick, darkorange); background-size: 100% 15%; color: whitesmoke; font-size: 16px; font-family: 'Lato'; } </style> <body> <h1> Example lazy load images using jQuery </h1> <img src="5.png" alt="numbers" loading="lazy" width="300" height="300" style="display:block; margin:10px" /> <img src="6.png" alt="numbers" loading="lazy" width="300" height="300" style="display:block; margin:10px" /> <img src="1.png" alt="numbers" loading="lazy" width="300" height="300" style="display:block; margin:10px" /> <img src="4.png"" alt="numbers" loading="lazy" width="300" height="300" style="display:block; margin:10px" /> <img src="6.png" alt="numbers" loading="lazy" width="300" height="300" style="display:block; margin:10px" /> <img src="4.png" alt="numbers" loading="lazy" width="300" height="300" style="display:block; margin:10px" /> </body> </html>

Explanation:

In the above example we created an example of lazy load for this we used the loading attribute set to lazy.

lazy-load-images-using-jquery

Output:

Below is the output of this example.

Example 2:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width = device-width, initial-scale=1.0"> <title> Example lazy load images using jquery </title> </head> <style> @import url(https://ift.tt/3APlVA7); @import url(https://ift.tt/39JB3mQ); h1 { line-height: 2em; padding-bottom: 15px; text-transform: none; font-size: 2em; font-weight: bold; font-style: italic; font-family: "Playfair Display", "Bookman",serif; color: #999; letter-spacing: -0.005em; word-spacing: 1px; letter-spacing: none; } body { height: 100%; width: 100%; background-image: linear-gradient(to right, firebrick, darkorange); background-size: 100% 15%; color: whitesmoke; font-size: 16px; font-family: 'Lato'; } </style> <body> <h1> Example lazy load images using jQuery </h1> <img src="4.png" alt="Paris" style="width: 30%" loading="lazy"> <img src="5.png" alt="Paris" style="width: 30%" loading="lazy"> <img src="4.png" alt="Paris" style="width: 30%" loading="lazy"> <img src="5.png" alt="Paris" style="width: 30%" loading="lazy"> <img src="2.png" alt="Paris" style="width: 30%" loading="lazy"> <img src="4.png" alt="Paris" style="width: 30%" loading="lazy"> <img src="6.png" alt="Paris" style="width: 30%" loading="lazy"> </body> </html>

Explanation:

In the above example we have created an example of lazy load for this we used the loading attribute set to lazy.

Output:

Below is the output of this example.

Example 3:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width = device-width, initial-scale=1.0"> <title> lazy load images using jQuery </title> <style> img { width: 500px; height: 350px; display: block; margin: 10px auto; } @import url(https://ift.tt/3APlVA7); @import url(https://ift.tt/39JB3mQ); body { height: 100%; width: 100%; background-color: #333; color: whitesmoke; font-size: 16px; font-family: 'Lato'; } h1 { position: relative; padding: 0; margin: 0; font-family: "Raleway", sans-serif; font-weight: 300; font-size: 40px; color: white; text-align: center; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } </style> </head> <h1> Example lazy load images using jquery </h1> <body> <img class="lazy-load" data-src="5.png"> <img class="lazy-load" data-src="6.png"> <img class="lazy-load" data-src="4.png"> <img class="lazy-load" data-src="5.png"> <img class="lazy-load" data-src="6.png"> <img class="lazy-load" data-src="2.png"> <img class="lazy-load" data-src="5.png"> <script> document.addEventListener("DOMContentLoaded", function() { let lazyloadImages = document.querySelectorAll("img.lazy-load"); let lazyloadThrottleTimeout; function lazyload() { if(lazyloadThrottleTimeout) { clearTimeout(lazyloadThrottleTimeout); } lazyloadThrottleTimeout = setTimeout(function() { let scrollTop = window.pageYOffset; lazyloadImages.forEach(function(img) { if(img.offsetTop < (window.innerHeight + scrollTop)) { img.src = img.dataset.src; img.classList.remove('lazy'); } }); if(lazyloadImages.length == 0) { document.removeEventListener("scroll", lazyload); window.removeEventListener("resize", lazyload); window.removeEventListener("orientationChange", lazyload); } }, 20); } document.addEventListener("scroll", lazyload); window.addEventListener("resize", lazyload); window.addEventListener("orientationChange", lazyload); }); </script> </body> </html>

Explanation:

In the above example we have created an example of lazy load for this we have used the class = "lazy-load".

Output:

Below is the output of this example.

Next Topic#

Adblock test (Why?)

You may be interested in:
>> Is a Chromebook worth replacing a Windows laptop?
>> Find out in detail the outstanding features of Google Pixel 4a
>> Top 7 best earbuds you should not miss

Related Posts:
>> Recognizing 12 Basic Body Shapes To Choose Better Clothes
>>Ranking the 10 most used smart technology devices
>> Top 5+ Best E-readers: Compact & Convenient Pen

Linchakin

27th Sep - Lazy load images using jQuery

What is jQuery?

What do you mean by lazy load images in jQuery?

Example 1:

Example 2:

Example 3:

0 Comments:

Post a Comment