What does lazy loading of images mean? How to implement lazy loading of images

The content of this article is about what does lazy loading of images mean? The implementation method of lazy loading of images has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The so-called lazy loading is a means to improve the opening speed of web pages and obtain a better user experience. The important parts of the selection are loaded first, and the less important parts are loaded when needed. For example, on an e-commerce website, the first screen usually has a lot of data, a banner or carousel with high definition. In the non-first-screen part of the page, there are many members' products mixed with a large number of pictures. This is when it is important to choose lazy loading to ensure the smoothness of the first screen.

This article is just a simple example of lazy loading of images. It is an introduction to performance optimization. The method is relatively simple and clear. As long as you have a little js foundation, you will be able to understand it.

No more nonsense

<img  alt="What does lazy loading of images mean? How to implement lazy loading of images" >

First of all, class="img-delay" and src attributes are added to images that are not on the first screen. The latter is used to place the attributes of the original URL address of the image. For the src attribute of the image itself, you can choose to leave it empty, or add a reminder image that "the image cannot be displayed", like Tmall:

//首先你需要引入一个 jQuery 库

//获取需要延迟加载的图片
var $picDelay = $(".img-delay");

//在 window 上监听滑动事件
$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();    //滑块划过的距离
  var screenHeight = screen.height;     //屏幕浏览器内容部分的高度

  //计算每个图片的位置是否符合要求
  $picDelay.each(function(idx, ele){
    var $ele = $(ele);
    //当scrollTop + screenHeight === ele.offsetTop时图片刚好出现上边沿
    if(scrollTop + screenHeight >= ele.offsetTop){
      $ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
    }
  });

  //当所有图片都加载了以后，移除这个事件
  if($(".img-delay").length Related recommendations: <p></p><p>Elaborate on lazy loading and preloading of images<a href="//m.sbmmt.com/js-tutorial-388508.html" target="_self"></a><br></p>##php's curl capture method of lazy loading images, please give me some advice<p><a href="//m.sbmmt.com/php-weizijiaocheng-337244.html" target="_self"></a></p>

The above is the detailed content of What does lazy loading of images mean? How to implement lazy loading of images. For more information, please follow other related articles on the PHP Chinese website!