[Edit]

JavaScript - image lazy loading

1 contributors

2 contributions

0 discussions

3 points

Created by:

Wiktor-Sribiew

830

In this article, we would like to show you how to create image with lazy loading using JavaScript.

Quick solution:

xxxxxxxxxx
 
var image = document.createElement('img');
​
image.src = '/path/to/image.png';
image.loading = 'lazy';
​
document.body.appendChild(image);

or:

xxxxxxxxxx
 
var image = new Image();
​
image.src = '/path/to/image.png';
image.loading = 'lazy';
​
document.body.appendChild(image);

Practical example

Edit

In this example, we create a reusable function to append images with a given url in the specified parent element.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <script>
​
    function appendImage(parent, url) {
        var image = document.createElement('img');
        image.src = url;
        image.loading = 'lazy';
        parent.appendChild(image);
    }
    
    appendImage(document.body, 'https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png');
    appendImage(document.body, 'https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png');
    appendImage(document.body, 'https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png');
    appendImage(document.body, 'https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png');
​
  </script>
</body>
</html>