Un plug-in de chargement différé d'image implémenté à l'aide de jquery (y compris le principe de chargement différé d'image)_jquery

Le chargement différé des images est également appelé chargement paresseux. Il est généralement appliqué aux pages Web contenant de nombreuses images et si la hauteur ou la largeur de la page est de plusieurs écrans, lorsque la page est chargée pour la première fois, seules les images. dans la zone visible sera affiché lorsque la page défile, l'image entre dans la zone visible avant d'être chargée. Cela peut améliorer considérablement la vitesse de chargement de la page, et moins de demandes d'images simultanées peuvent également réduire la pression sur le serveur. Si les utilisateurs restent uniquement sur le premier écran, ils peuvent également enregistrer des données. S'il y a beaucoup d'images dans TAB, cela peut également être appliqué à TAB, puis les images seront chargées lorsque TAB sera déclenché.

Le principe du chargement paresseux des images est relativement simple. Tout d'abord, mettez en cache l'adresse réelle de l'image dans un attribut personnalisé (lazy-src) et utilisez une image d'espace réservé 1×1 entièrement transparente pour l'adresse src. . Bien entendu, l’image d’espace réservé peut également être une autre image.

Copier le code Le code est le suivant :

Étant donné que javascript est utilisé pour charger les images, si l'utilisateur a désactivé javascript, une alternative peut être configurée.

Copier le code Le code est le suivant :

Lorsque la page est chargée pour la première fois, la position de l'image dans la page est obtenue et mise en cache (chaque fois que la valeur de décalage est prise déclenchera une redistribution de la page), la zone visible est calculée, et lorsque la position de l'image apparaît dans la zone visible, le src est La valeur est remplacée par l'adresse réelle et l'image commence à se charger.

Lorsque la page défile, il est alors déterminé si la valeur de position mise en cache de l'image apparaît dans la zone visible, et le src est chargé à la place. Lorsque toutes les images sont chargées, les événements déclencheurs correspondants sont déchargés pour éviter les fuites de mémoire causées par des opérations répétées. Considérez la fenêtre entière comme un grand conteneur, vous pouvez également configurer un petit conteneur dans la page et vous pouvez également implémenter un chargement différé des images dans le petit conteneur.

Ce qui suit est le code implémenté, que j'ai écrit en tant que plug-in jQuery.

Copier le code Le code est le suivant :

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

// Décharge l'événement déclencheur une fois toutes les images chargées
if( !elems.length ){
if( triggerElem ){
triggerElem.unbind( event, fire );
}
else{
containers.unbind( o.event, fire );
}
$( window ).unbind( 'resize', fire );
elems = null;
}

};

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

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

// Initialisation
loader();

renvoie ceci ;
};

})( jQuery );

Appel :

Copier le code Le code est le suivant :

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

L'appel par défaut peut omettre tous les paramètres .

Copier le code Le code est le suivant :

$( 'img' ).imglazyload();

Description de l'API du plug-in pour le chargement paresseux des images :

attr string
Le nom de l'attribut qui stocke la véritable adresse de l'image, correspondant au HTML, et la valeur par défaut est lazy-src.

conteneur dom et sélecteur
Le conteneur par défaut est window et le conteneur peut être personnalisé.

event Stirng
Le type d'événement qui déclenche le chargement de l'image, la valeur par défaut est l'événement window.onscroll

fadeIn booléen
S'il faut utiliser l'effet fadeIn de jQuery pour afficher, la valeur par défaut est false.

numéro de seuil
La page sera chargée lorsqu'elle défilera jusqu'à la distance spécifiée par rapport à l'image. La valeur par défaut est 0.

booléen vertical
Que ce soit pour faire défiler horizontalement, la valeur par défaut est vraie (verticale).

loadScript (version améliorée de la fonction) booléen
Que ce soit pour charger des images publicitaires JavaScript sans blocage, la valeur par défaut est false.