An image lazy loading plug-in implemented using jquery (including image lazy loading principle)_jquery

Delayed loading of images is also called lazy loading. It is usually applied to web pages with many images. If a page has many images and the page height or width is several screens, when the page is first loaded, only the images in the visible area will be displayed. When the page is scrolling, the image enters the visible area before being loaded. This can significantly improve the loading speed of the page, and fewer concurrent image requests can also reduce the pressure on the server. If users only stay on the first screen, they can also save data. If there are many pictures in TAB, it can also be applied to TAB, and then the pictures will be loaded when TAB is triggered.

The principle of lazy loading of images is relatively simple. First, cache the real address of the image in a custom attribute (lazy-src), and use a 1×1 fully transparent placeholder image for the src address. Instead, of course, the placeholder image can also be another image.

Copy code The code is as follows:

Because javascript is used to load images, if the user has disabled javascript, an alternative can be set up.

Copy code The code is as follows:

When the page is first loaded, the position of the image in the page is obtained and cached (each time the value of offset is taken will trigger a reflow of the page), the visible area is calculated, and when the position of the image appears in the visible area, the src is The value is replaced with the real address, and the image starts loading.

When the page scrolls, it is then determined whether the cached position value of the image appears in the visible area, and the src is loaded instead. When all images are loaded, the corresponding trigger events are unloaded to avoid memory leaks caused by repeated operations. Think of the entire window as a large container, then you can also set up a small container in the page, and you can also implement delayed loading of images in the small container.

The following is the implemented code, which I wrote as a jQuery plug-in.

Copy code The code is as follows:

(function( $ ){
$.fn.imglazyload = function( options ){
 var o = $.extend({
    attr  :   'lazy-src',
    container  :  window, 
    event   :  'scroll',    
    fadeIn      :   false,    
    threshold  :  0, 
    vertical  :  true 
   }, options ),

  event = o.event,
  vertical = o.vertical,
  container = $( o.container ),
  threshold = o.threshold, 
  // 将jQuery对象转换成DOM数组便于操作
  elems = $.makeArray( $(this) ),  
  dataName = 'imglazyload_offset',   
  OFFSET = vertical ? 'top' : 'left',
  SCROLL = vertical ? 'scrollTop' : 'scrollLeft',   
  winSize = vertical ? container.height() : container.width(),
  scrollCoord = container[ SCROLL ](),
  docSize = winSize + scrollCoord;

 // 延迟加载的触发器 
 var trigger = {

  init : function( coord ){
   return coord >= scrollCoord &&
                            coord <= ( docSize + threshold );
},

scroll : function( coord ){
var scrollCoord = container[ SCROLL ]();
return coord >= scrollCoord &&
                    coord <= ( winSize + scrollCoord + threshold );
},

resize : function( coord ){
var scrollCoord = container[ SCROLL ](),
winSize = vertical ?
container.height() :
container.width();
return coord >= scrollCoord &&
                   coord <= ( winSize + scrollCoord + threshold );
  }
 };

 var loader = function( triggerElem, event ){
  var i = 0,
   isCustom = false,
   isTrigger, coord, elem, $elem, lazySrc;

  // 自定义事件只要触发即可，无需再判断
  if( event ){
   if( event !== 'scroll' && event !== 'resize' ){
    isCustom = true;
   }
  }
  else{
   event = 'init';
  }

  for( ; i < elems.length; i++ ){ 
   isTrigger = false;
   elem = elems[i];
   $elem = $( elem );
   lazySrc = $elem.attr( o.attr );

   if( !lazySrc || elem.src === lazySrc ){
    continue;
   }
   // 先从缓存获取offset值，缓存中没有才获取计算值,
   // 将计算值缓存，避免重复获取引起的reflow
   coord = $elem.data( dataName );

   if( coord === undefined ){
    coord = $elem.offset()[ OFFSET ];
    $elem.data( dataName, coord );
   }

   isTrigger = isCustom || trigger[ event ]( coord );   

   if( isTrigger ){
    // 加载图片
    elem.src = lazySrc;
    if( o.fadeIn ){
     $elem.hide().fadeIn();
    }
    // 移除缓存
    $elem.removeData( dataName );
    // 从DOM数组中移除该DOM
    elems.splice( i--, 1 );
   }
  }

// Unload the trigger event after all images are loaded
if( !elems.length ){
if( triggerElem ){
triggerElem.unbind( event, fire );
}
else{
container.unbind( o.event, fire );
}
$( window ).unbind( 'resize', fire );
elems = null;
}

};

var fire = function( e ){
loader( $(this), e.type );
};

// Bind event
container = event === 'scroll' ? container : $( this );
container.bind( event, fire );
$( window ).bind( 'resize', fire );

// Initialization
loader();

return this;
};

})( jQuery );

Call:

Copy code The code is as follows:

$( 'img ' ).imglazyload({
event : 'scroll',
attr : 'lazy-src'
});

The default call can omit all parameters.

Copy code The code is as follows:

$( 'img' ).imglazyload();

Plug-in API description for lazy loading of images:

attr string
The attribute name that stores the real address of the image, corresponding to HTML, and the default is lazy-src.

container dom & selector
The default container is window, and the container can be customized.

event stirng
The event type that triggers image loading, the default is window.onscroll event

fadeIn boolean
Whether to use jQuery’s fadeIn effect to display, the default is false.

threshold number
The page will be loaded when it is scrolled to the specified distance from the image. The default is 0.

vertical boolean
Whether to scroll horizontally, the default is true (vertical).

loadScript (enhanced version of the function) boolean
Whether to load JavaScript advertising images without blocking, the default is false.