Implementation of Lazy Loading of js Picture

1. Use scenarios

When a large number of pictures need to be loaded on the web page, if all the pictures are loaded once, the loading time of the web page will be too long;

The web page itself is already slow to respond, and if you need to quote pictures on your page, it will also make it worse.

2. Lazy loading principle of pictures

Lazy loading of pictures is just called higher, and its implementation is very simple, that is, assigning values to src attributes of pictures when necessary, that's all.

3. Code implementation

/**
 *  Lazy loading of pictures 
 */
function ImgLazyLoad() {
  /**
   *  Scroll to the location of the picture and then load 
   * @param imgId
   *    Lazy to load pictures ID
   * @param imgSrc
   *    Address of lazy loading picture 
   * @param distance
   *   Visual distance of the picture (this parameter can not be transmitted)     
   */
  this.scrollLoad = function(imgId,imgSrc,distance) {    
    //  Object for the picture src
    var img_source = $('#' + imgId).attr('src');
    //  Execute only 1 Times 
    if("" == img_source) {
      //  The visible height of the web page without scrolling 
      var documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
      //  Gets the distance between the picture and the top of the page 
      var imgOffsetTop = $('#' + imgId)[0].offsetTop;
      //  Gets the visible height of a web page 
      // var bodyClientHeight = document.body.clientHeight;
      
      // 1. Height of Web page < Less than the height of the visual area of the web page (imgOffsetTop < documentClientHeight) The scroll event does not occur 
      if (imgOffsetTop < documentClientHeight) {
        $('#' + imgId)[0].src = imgSrc;
        return;
      }      
      
      //  Get screen height 
      //var screenHeight = window.screen.height;
      //  The vertical offset distance between the picture and the upper left corner of the web page (the distance from the top of the web page) 
      var max_imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
      // ie With decimal under it, so only integers are taken 
      max_imgClientTop = parseInt(max_imgClientTop);
      //  Visual distance of picture (how much less can be seen) 
      var max_imgClientDistance = max_imgClientTop - documentClientHeight;
      //0<= distance <=max_imgClientDistance
      // 1. When the parameter does not exist, set the value =0;( When the picture first appears from the bottom of the visual area, the distance is minimized )distance → → Min=0
      // 2. Parameter > When the visible height of the web page, set the value = Height of visible area ;( When not scrolling, the distance reaches the maximum )distance → → Max=max_imgClientDistance,scrollTop=0
      distance = ((distance || 0)>max_imgClientDistance)?max_imgClientDistance:distance;
      
      // 2. Maximum distance, no rolling 
      if (distance == max_imgClientDistance) {
        $('#' + imgId)[0].src = imgSrc;
        return;
      }
      
      //  Page binding scroll event   
      $(document).scroll(function(){
        
        //  Get the volume height of the web page 
        // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        //  Distance from the top of the page 
        var imgClientTop = $('#' + imgId)[0].getBoundingClientRect().top;
        //  Visual height of picture 
        var clientHeight = documentClientHeight - imgClientTop;
        //  Reach the specified distance difference or the picture has entered the field of view 
        if (-clientHeight <= distance || documentClientHeight >= imgClientTop) {
          $('#' + imgId)[0].src = imgSrc;
        }
        
      });
    }
  };
  /**
   *  By clicking another element and then loading it 
   * @param clickId
   *   Page element bound to single-click event ID
   * @param imgId
   *  
   * @param imgSrc
   *    Address of lazy loading picture 
   */ 
  // 
  this.clickLoad = function(clickId,imgId,imgSrc) {
    //  Object for the picture src
    var img_source = $('#' + imgId).attr('src');
    //  Execute only 1 Times 
    if("" == img_source) {
      //  Bind single click event 
      $('#' + clickId).click(function(){
        $('#' + imgId)[0].src = imgSrc;
      });
    }
  };
};

Call:

$(function() {
  //  Instantiate object 
  var ill = new ImgLazyLoad();
  //  Call 
  ill.scrollLoad('aa','http://files.cnblogs.com/files/Marydon20170307/ws_products.bmp',404);
});

4. Involve knowledge points

There are also many ways to achieve online, but you can't customize the timing of loading pictures. In order to achieve this point, it took a lot of effort to do a good job.

The code is short, but it involves many knowledge points.

//  Gets the height of the visual area of the web page (without scrolling) 
document.documentElement.clientHeight || window.innerHeight
//  Gets the visible height of the web page (excluding the height of hidden elements) 
document.body.clientHeight
//  Gets the height of the display screen 
window.screen.height
//  Gets the volume height of the web page ( ie The former acquisition method is not supported under) 
document.body.scrollTop || document.documentElement.scrollTop 　　 
//  Gets the distance of the specified element from the top of the web page (static dead value) 
document.getElementById('#id').offsetTop
document.getElementById('#id').getBoundingClientRect().top

Above is the js picture lazy loading of the implementation of the details, more about js picture lazy loading information please pay attention to this site other related articles!