Image de flux de cascade JavaScript chargement paresseux exemple d'analyse et compétences d'optimisation

Image de flux de cascade JavaScript chargement paresseux exemple d'analyse et compétences d'optimisation_javascript

WBOY

Libérer： 2016-05-16 15:14:03

original

1805 Les gens l'ont consulté

J'ai déjà écrit un article sur le "chargement paresseux" des images. Lorsque je triais les fichiers le week-end, j'ai probablement regardé le code que j'avais écrit auparavant et j'ai découvert qu'il existe de nombreux endroits qui peuvent être optimisés.
Cet article combine principalement l'article précédent "Exemple de chargement paresseux d'image de flux en cascade javascript" pour jeter un œil à quelques connaissances sur le "chargement paresseux" d'images.

Le but du "chargement paresseux" des images :
Chargez les images selon vos besoins, ce qui signifie charger les images à afficher lorsqu'elles doivent être affichées, réduisant ainsi la surcharge de bande passante réseau liée à un chargement unique.

Regardons d'abord un morceau de code :

 var conf = {
   'loadfirst': true,
   'loadimg': true
  };

  for (var item in conf) {
   if (item in co) {
    conf.item = co.item;
   }
  }

Copier après la connexion

Ici, je veux principalement réaliser la fusion de la configuration utilisateur et de la configuration par défaut. Écrire du code comme celui-ci n'est pas très élégant. Maintenant, j'utilise $.extend pour l'optimisation. Le code est le suivant :

_this.setting = {
   "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
   "loadNum": 1 //滚动时，当前节点之后加载个数
  };

  $.extend(_this.setting, _this.getSetting());

Copier après la connexion

Ici, je vais me concentrer sur les deux paramètres nouvellement ajoutés mobileHeight et loadNum

mobileHeight est la hauteur du client par défaut. Plus la valeur est grande, plus d'images seront chargées sur le premier écran ;

loadNum Si le nœud actuel apparaît à l'écran, plusieurs nœuds après le nœud actuel peuvent être chargés en même temps, ce qui peut augmenter la vitesse de chargement des images

;

Mon code était déjà écrit comme ceci :

_this.loadFirstScreen = function() {
   if (conf.loadfirst) {
    lazyNode.each(function(i) {
     currentNodeTop = $(this).offset().top;
     //这里的800就是上面提到的mobileHeight
     if (currentNodeTop < mobileHeight + 800) {
      _this.replaceImgSrc($(this));
     }
    });
   }
  };

_this.loadImg = function() {
   if (conf.loadimg) {
    $(window).on('scroll', function() {
     var imgLazyList = $('[node-type=imglazy]', node);
     //这里的5就是上面提到的loadNum
     for (var i = 0; i < 5; i++) {
      _this.replaceImgSrc(imgLazyList.eq(i));
     }
    });
   }
  };

Copier après la connexion

Pour optimiser mon code actuel selon l'idée configurable, cela ressemble à ceci :

loadFirstSrceen: function() {
   // 加载首屏
   var _this = this;
   var currentNodeTop;
   var imgNodeList = _this.imgNode;
   $(imgNodeList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
     _this.replaceImgSrc($(this));
    }
   });
  },
  scrollLoadImg: function() {
   //滚动的时候加载图片
   var _this = this;
   var currentNodeTop;
   var scrollTop = $('body').scrollTop();
   var imgLazyList = $('[node-type=imglazy]');

   $(imgLazyList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop - scrollTop < _this.mobileHeight()) {
     //加载当前节点后的规定个数节点
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  }

Copier après la connexion

Un aspect plus important est d'organiser la structure actuelle du code en fonction de l'idée d'écrire des plug-ins. Le code est le suivant :

;(function($) {
 var LoadImgLazy = function(imgNode) {
  var _this = this;
  _this.imgNode = imgNode;

  _this.setting = {
   "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
   "loadNum": 1 //滚动时，当前节点之后加载个数
  };

  $.extend(_this.setting, _this.getSetting());

  _this.loadFirstSrceen();
  $(window).on('scroll', function() {
   _this.scrollLoadImg();
  });


 };

 LoadImgLazy.prototype = {
  mobileHeight: function() {
   return $(window).height();
  },
  loadFirstSrceen: function() {
   // 加载首屏
   var _this = this;
   var currentNodeTop;
   var imgNodeList = _this.imgNode;
   $(imgNodeList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
     _this.replaceImgSrc($(this));
    }
   });
  },
  scrollLoadImg: function() {
   //滚动的时候加载图片
   var _this = this;
   var currentNodeTop;
   var scrollTop = $('body').scrollTop();
   var imgLazyList = $('[node-type=imglazy]');

   $(imgLazyList).each(function() {
    currentNodeTop = $(this).offset().top;
    if (currentNodeTop - scrollTop < _this.mobileHeight()) {
     //加载当前节点后的规定个数节点
     for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
      _this.replaceImgSrc($(imgLazyList).eq(i));
     }
     return false;
    }
   });
  },
  replaceImgSrc: function(loadImgNode) {
   //动态替换图片
   var srcValue;
   var imgDataSrc;
   var _this = this;
   var imgUrlList = $(loadImgNode).find('img[data-lazysrc]');

   if (imgUrlList.length > 0) {
    imgUrlList.each(function(i) {
     imgDataSrc = $(this).attr('data-lazysrc');
     srcValue = $(this).attr('src');
     if (srcValue === '#') {
      if (imgDataSrc) {
       $(this).attr('src', imgDataSrc);
       $(this).removeAttr('data-lazysrc');
      }
     }
    });
    //移除已经运行过懒加载节点的node-type 对性能提升
    $(loadImgNode).removeAttr('node-type');
   }
  },
  getSetting: function() {
   var userSetting = $('[lazy-setting]').attr('lazy-setting');
   if (userSetting && userSetting !== '') {
    return $.parseJSON(userSetting);
   } else {
    return {};
   }
  },
  destory: function() {
   //销毁方法区
   $(window).off('scroll');
  }
 };

 LoadImgLazy.init = function(imgNode) {
  new this(imgNode);
 };

 window.LoadImgLazy = LoadImgLazy;

})(Zepto);

Copier après la connexion

Grâce à cet article, j'espère que vous aurez une compréhension plus approfondie du chargement paresseux des images de flux en cascade JavaScript et apprendrez à l'optimiser. Merci d'avoir lu.