How to use HTML, CSS and jQuery to implement advanced techniques for lazy loading of images

How to use HTML, CSS and jQuery to implement advanced techniques for lazy loading of images

Lazy loading technology (Lazy Loading) is a technical means to improve the performance of web pages. Especially suitable for web pages containing a lot of images. By using HTML, CSS and jQuery, we can easily implement lazy loading of images to speed up web page loading and improve user experience. This article will introduce how to use these three technologies to implement advanced techniques for lazy loading of images, and give specific code examples.

1. HTML preparation
In HTML, we need to replace the src attribute of each image that needs to be lazy loaded with a custom data-src attribute. At the same time, in order to achieve the progressive loading effect of images, we can set a placeholder.

<img data-src="path/to/image.jpg" src="path/to/placeholder.jpg" alt="image">

2. CSS style setting
In order to maintain the display of the placeholder image before the image is loaded, we need to use CSS to set the img element. At the same time, in order to achieve a progressive loading effect, we can also set a transition effect.

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
img.loaded {
  opacity: 1;
}

3. Implementing lazy loading with jQuery
It is very simple to implement lazy loading using jQuery. We can use the $(window).on('scroll', function(){}) event to listen for scrolling events and trigger lazy loading by determining whether the image is visible.

$(window).on('scroll', function() {
  $('img').each(function() {
    if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

The above code will listen to the scroll event and judge each img element. If the element is within the visible area and has not been loaded, then assign the value of the data-src attribute to src and add The loaded class name is used to mark it as loaded.

4. Fragment loading and performance optimization
In order to further improve performance, we can divide the image into multiple fragments for loading instead of loading all images at once. This can avoid performance problems caused by the page requesting a large number of images at once.

$(window).on('scroll', function() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  $('img:not(.loaded)').each(function() {
    if (isElementInViewport($(this), windowHeight, scrollTop)) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el, windowHeight, scrollTop) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= (scrollTop - windowHeight) &&
    rect.top <= (scrollTop + windowHeight * 2)
  );
}

In the above code, we determine whether each picture is within the visible area by obtaining the height of the window and the position of the scroll bar. Only images within the visible area will be loaded.

To sum up, by using HTML, CSS and jQuery, we can easily implement advanced techniques of lazy loading of images and improve the loading speed and user experience of web pages. By setting custom data-src attributes, CSS styles and jQuery event listeners, as well as combining fragment loading and performance optimization, we can more flexibly control the loading behavior of images and improve user experience and page performance. I hope the code examples provided in this article will be helpful to you!

The above is the detailed content of How to use HTML, CSS and jQuery to implement advanced techniques for lazy loading of images. For more information, please follow other related articles on the PHP Chinese website!