Heim > Web-Frontend > js-Tutorial > JavaScript-Wasserfall-Flow-Bild, verzögertes Laden, Beispiel_Javascript-Kenntnisse

JavaScript-Wasserfall-Flow-Bild, verzögertes Laden, Beispiel_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:14:04
Original
1617 Leute haben es durchsucht

Vor kurzem hat das Projekt „Lazy Loading“ verwendet und die Aktualisierungen sind jetzt durchschnittlich. Da es hauptsächlich für die Entwicklung mobiler Endgeräte verwendet wird, verwendet die Bibliotheksdatei zepto.js. Natürlich kann es auch mit jQuery verwendet werden.

Der Code lautet wie folgt:

/**
 * Created by zhiqiang on 2015/10/14.
 * hpuhouzhiqiang@gmail.com
 * 图片的懒加载
 **/
function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),
 mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
 imgDataSrc, localUrl;

 localUrl = location.href;
 // 获取当前浏览器可视区域的高度
 mobileHeight = $(window).height();

 return function(co) {

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

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

 var that = {};
 var _this = {};
 /**
  * [replaceImgSrc 动态替换节点中的src]
  * @param {[type]} tempObject [description]
  * @return {[type]}  [description]
  */
 _this.replaceImgSrc = function(tempObject) {
  var srcValue;

  $.each(tempObject, function(i, item) {
  imgObject = $(item).find('img[data-lazysrc]');
  imgObject.each(function(i) {
   imgDataSrc = $(this).attr('data-lazysrc');
   srcValue = $(this).attr('src');
   if (srcValue == '#') {
   if (imgDataSrc) {
    $(this).attr('src', imgDataSrc);
    $(this).removeAttr('data-lazysrc');
   }
   }
  });
  });
 };

 /**
  * 首屏判断屏幕上是否出现imglazy节点,有的话就加载图片
  * @param {[type]} i) {   currentNodeTop [description]
  * @return {[type]} [description]
  */
 _this.loadFirstScreen = function() {
  if (conf.loadfirst) {
  lazyNode.each(function(i) {
   currentNodeTop = $(this).offset().top;
   if (currentNodeTop < mobileHeight + 800) {
   _this.replaceImgSrc($(this));
   }
  });
  }
 };

 //当加载过首屏以后按照队列加载图片
 _this.loadImg = function() {
  if (conf.loadimg) {
  $(window).on('scroll', function() {
   var imgLazyList = $('[node-type=imglazy]', node);
   for (var i = 0; i < 5; i++) {
   _this.replaceImgSrc(imgLazyList.eq(i));
   }
  });
  }
 };

 that = {
  replaceImgSrc: _this.replaceImgSrc(),
  mobileHeight: mobileHeight,
  objIsEmpty: function(obj) {
  for (var item in obj) {
   return false;
  }
  return true;
  },
  destory: function() {
  if (_this) {
   $.each(_this, function(i, item) {
   if (item && item.destory) {
    item.destory();
   }
   });
   _this = null;
  }
  $(window).off('scroll');
  }
 };
 return that;
 };
}
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel allen beim Erlernen des verzögerten Ladens von Javascript-Bildern hilfreich sein wird.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage