Describe in detail how jQuery implements lazy loading

1. Why is lazy loading needed?

• For usage scenarios with too many pictures, in order to increase the page loading speed and improve the user experience, we do not load pictures that do not appear within the field of view. , wait until it appears in the field of view before loading.

2. The implementation principle of lazy loading

-The implementation principle is very simple. First, point the src of img to a small picture, and store the real address of the picture in img. In a custom attribute, , wait until the image appears within the field of view, get the img element, and change src The value in is assigned to src.

3. Knowledge points necessary to implement lazy loading

(1) Obtain the window, window scrolling and offset height of the element from the top of the window, and calculate whether the element appears within the visible range of the window ;

Paste_Image.png

    function isShow($el){
      var winH = $(window).height(),//获取窗口高度
            scrollH = $(window).scrollTop(),//获取窗口滚动高度
            top = $el.offset().top;//获取元素距离窗口顶部偏移高度
      if(top < scrollH + winH){
          return true;//在可视范围
        }else{
          return false;//不在可视范围
        }
      }

(2) Listen to the window scrolling event and check whether the element is within the visible range Inside;

    $(window).on('scroll', function(){//监听滚动事件
        checkShow();
    })
    checkShow();
    function checkShow(){//检查元素是否在可视范围内
        $('img').each(function(){//遍历每一个元素
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//判断是否已加载
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//设置时间是为了更好的看出效果
            };
        });
    }

(3) When the element is displayed, replace the previous default photo with the photo in src.

    function showImg($el){
        $el.attr('src', $el.attr('src'));
        $cur.data('isloaded',true);
    }

Paste_Image.png

Paste_Image.png

The above is the detailed content of Describe in detail how jQuery implements lazy loading. For more information, please follow other related articles on the PHP Chinese website!