Ein mit jquery implementiertes Bild-Lazy-Loading-Plug-in (einschließlich Bild-Lazy-Loading-Prinzip)

Ein mit jquery implementiertes Bild-Lazy-Loading-Plug-in (einschließlich Bild-Lazy-Loading-Prinzip)_jquery

WBOY

Freigeben： 2016-05-16 16:46:10

Original

1091 Leute haben es durchsucht

Das verzögerte Laden von Bildern wird normalerweise auf Webseiten mit vielen Bildern angewendet und die Seitenhöhe oder -breite beträgt mehrere Bildschirme, wenn die Seite zum ersten Mal geladen wird Beim Scrollen der Seite gelangt das Bild vor dem Laden in den sichtbaren Bereich. Dadurch kann die Ladegeschwindigkeit der Seite erheblich verbessert werden, und durch weniger gleichzeitige Bildanfragen kann auch die Belastung des Servers verringert werden. Wenn Benutzer nur auf dem ersten Bildschirm bleiben, können sie auch Daten speichern. Wenn sich in TAB viele Bilder befinden, kann es auch auf TAB angewendet werden. Die Bilder werden dann geladen, wenn TAB ausgelöst wird.

Das Prinzip des verzögerten Ladens von Bildern ist relativ einfach. Speichern Sie zunächst die tatsächliche Adresse des Bildes in einem benutzerdefinierten Attribut (lazy-src) und verwenden Sie ein vollständig transparentes 1×1-Platzhalterbild für die Quelladresse Stattdessen kann das Platzhalterbild natürlich auch ein anderes Bild sein.

Code kopieren Der Code lautet wie folgt:

Da zum Laden von Bildern Javascript verwendet wird, kann eine Alternative eingerichtet werden, wenn der Benutzer Javascript deaktiviert hat.

Code kopieren Der Code lautet wie folgt:

Wenn die Seite zum ersten Mal geladen wird, wird die Position des Bildes auf der Seite ermittelt und zwischengespeichert (jedes Mal, wenn der Offset-Wert verwendet wird, wird ein Reflow der Seite ausgelöst), der sichtbare Bereich wird berechnet und die Position wird berechnet des Bildes im sichtbaren Bereich erscheint, wird der src-Wert durch die tatsächliche Adresse ersetzt und das Bild wird geladen.

Beim Scrollen der Seite wird dann ermittelt, ob der zwischengespeicherte Positionswert des Bildes im sichtbaren Bereich erscheint, und stattdessen wird der src geladen. Wenn alle Bilder geladen sind, werden die entsprechenden Triggerereignisse entladen, um Speicherverluste durch wiederholte Vorgänge zu vermeiden. Stellen Sie sich das gesamte Fenster als großen Container vor, dann können Sie auch einen kleinen Container auf der Seite einrichten und im kleinen Container auch das verzögerte Laden von Bildern implementieren.

Das Folgende ist der implementierte Code, den ich als jQuery-Plugin geschrieben habe.

Code kopieren Der Code lautet wie folgt:

(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 );
   }
  }

// Triggerereignis entladen, nachdem alle Bilder geladen wurden
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 );
$( window ).bind( 'resize', fire ) ;

// Initialisierung

loader();

gib dies zurück;

};

})( jQuery );

Anruf:

Code kopieren Der Code lautet wie folgt:

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

Der Standardaufruf kann alle Parameter weglassen .

Code kopieren Der Code lautet wie folgt:

$( 'img' ).imglazyload();

Plug-in-API-Beschreibung für verzögertes Laden von Bildern:

attr string

Der Attributname, der die tatsächliche Adresse des Bildes speichert, entsprechend HTML, und der Standardwert ist lazy-src.

Container Dom & Selector

Der Standardcontainer ist Fenster, und der Container kann angepasst werden.

Event Stirng

Der Ereignistyp, der das Laden von Bildern auslöst, der Standardwert ist window.onscroll event

fadeIn boolean

Gibt an, ob der FadeIn-Effekt von jQuery zur Anzeige verwendet werden soll. Der Standardwert ist „false“.

Schwellenwertzahl

Die Seite wird geladen, wenn sie bis zum angegebenen Abstand vom Bild gescrollt wird. Der Standardwert ist 0.

vertikal boolean

Ob horizontal gescrollt werden soll, der Standardwert ist true (vertikal).

loadScript (erweiterte Version der Funktion) boolean

Gibt an, ob JavaScript-Werbebilder ohne Blockierung geladen werden sollen. Der Standardwert ist false.