Heim > Web-Frontend > js-Tutorial > Hauptteil

Bild verzögertes Laden imgLazyLoading.js

亚连
Freigeben: 2018-06-14 14:56:09
Original
1521 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von imgLazyLoading.js für das verzögerte Laden von Bildern vorgestellt. Interessierte Freunde können darauf verweisen.

In diesem Artikel wird hauptsächlich die Verwendung von Bildern im Internet vorgestellt. Ende. ImgLazyLoading: Der spezifische Inhalt lautet wie folgt:

//懒加载对象目标代码
<img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png">
//引用本地js
<script src="__PUBLIC__/js/imgLazyLoading.min.js"></script>
<script src="__PUBLIC__/js/imgLazyLoading.js"></script>
Nach dem Login kopieren
2. js-Code

imgLazyLoading.min.js

jQuery.fn.extend({
  delayLoading: function (a) {
    function g(d) {
      var b, c;
      if (a.container === undefined || a.container === window) {
        b = $(window).scrollTop();
        c = $(window).height() + $(window).scrollTop()
      } else {
        b = $(a.container).offset().top;
        c = $(a.container).offset().top + $(a.container).height()
      }
      return d.offset().top + d.height() + a.beforehand >= b && c >= d.offset().top - a.beforehand
    }

    function h(d) {
      var b, c;
      if (a.container === undefined || a.container === window) {
        b = $(window).scrollLeft();
        c = $(window).width() + $(window).scrollLeft()
      } else {
        b = $(a.container).offset().left;
        c = $(a.container).offset().left + $(a.container).width()
      }
      return d.offset().left + d.width() + a.beforehand >= b && c >= d.offset().left - a.beforehand
    }

    function f() {
      e.filter("img[" + a.imgSrcAttr + "]").each(function (d, b) {
        if ($(b).attr(a.imgSrcAttr) !== undefined && $(b).attr(a.imgSrcAttr) !== null && $(b).attr(a.imgSrcAttr) !== "" && g($(b)) && h($(b))) {
          var c = new Image;
          c.onload = function () {
            $(b).attr("src", c.src);
            a.duration !== 0 && $(b).hide().fadeIn(a.duration);
            $(b).removeAttr(a.imgSrcAttr);
            a.success($(b))
          };
          c.onerror = function () {
            $(b).attr("src",
              a.errorImg);
            $(b).removeAttr(a.imgSrcAttr);
            a.error($(b))
          };
          c.src = $(b).attr(a.imgSrcAttr)
        }
      })
    }

    a = jQuery.extend({
      defaultImg: "",
      errorImg: "",
      imgSrcAttr: "originalSrc",
      beforehand: 0,
      event: "scroll",
      duration: "normal",
      container: window,
      success: function () {
      },
      error: function () {
      }
    }, a || {});
    if (a.errorImg === undefined || a.errorImg === null || a.errorImg === "")a.errorImg = a.defaultImg;
    var e = $(this);
    if (e.attr("src") === undefined || e.attr("src") === null || e.attr("src") === "")e.attr("src", a.defaultImg);
    f();
    $(a.container).bind(a.event, function () {
      f()
    })
  }
});
Nach dem Login kopieren

imgLazyLoading.js

$(function () {
  $("img").delayLoading({
    //defaultImg: "__PUBLIC__/images/img/loading.gif",      // 预加载前显示的图片
    errorImg: "",            // 读取图片错误时替换图片(默认:与defaultImg一样)
    imgSrcAttr: "originalSrc",      // 记录图片路径的属性(默认:originalSrc,页面img的src属性也要替换为originalSrc)
    beforehand: 0,            // 预先提前多少像素加载图片(默认:0)
    event: "scroll",           // 触发加载图片事件(默认:scroll)
    duration: "normal",         // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000),默认:"normal"
    container: window,          // 对象加载的位置容器(默认:window)
    success: function (imgObj) { },   // 加载图片成功后的回调函数(默认:不执行任何操作)
    error: function (imgObj) { }     // 加载图片失败后的回调函数(默认:不执行任何操作)
  });
});
Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

vue-cli-Konfigurationsdatei (ausführliches Tutorial)

Verwenden von jQuery zum Kapseln von animate.css (ausführliches Tutorial)

So setzen Sie den Ruhezustand in Vuex zurück

Das obige ist der detaillierte Inhalt vonBild verzögertes Laden imgLazyLoading.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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