JAVASCRIPT   65

lazy-load.js

Guest on 29th July 2021 12:54:44 AM

  1. (function($) {
  2.         lazy_load_init();
  3.         $( 'body' ).bind( 'post-load', lazy_load_init ); // Work with WP.com infinite scroll
  4.  
  5.         function lazy_load_init() {
  6.                 $( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {
  7.                         lazy_load_image( this );
  8.                 });
  9.  
  10.                 // We need to force load gallery images in Jetpack Carousel and give up lazy-loading otherwise images don't show up correctly
  11.                 $( '[data-carousel-extra]' ).each( function() {
  12.                         $( this ).find( 'img[data-lazy-src]' ).each( function() {
  13.                                 lazy_load_image( this );
  14.                         } );           
  15.                 } );
  16.         }
  17.  
  18.         function lazy_load_image( img ) {
  19.                 var $img = jQuery( img ),
  20.                         src = $img.attr( 'data-lazy-src' );
  21.  
  22.                 if ( ! src || 'undefined' === typeof( src ) )
  23.                         return;
  24.  
  25.                 $img.unbind( 'scrollin' ) // remove event binding
  26.                         .hide()
  27.                         .removeAttr( 'data-lazy-src' )
  28.                         .attr( 'data-lazy-loaded', 'true' );
  29.  
  30.                 img.src = src;
  31.                 $img.fadeIn();
  32.         }
  33. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.