Maison > interface Web > js tutoriel > Chargement paresseux de l'image imgLazyLoading.js

Chargement paresseux de l'image imgLazyLoading.js

亚连
Libérer: 2018-06-14 14:56:09
original
1570 Les gens l'ont consulté

Cet article présente principalement l'utilisation de imgLazyLoading.js pour le chargement paresseux d'images. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article présente principalement l'utilisation d'images sur le Web. fin. Chargement paresseux de imgLazyLoading pour votre référence, le contenu spécifique est le suivant

1 code html

//懒加载对象目标代码
<img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png">
//引用本地js
<script src="__PUBLIC__/js/imgLazyLoading.min.js"></script>
<script src="__PUBLIC__/js/imgLazyLoading.js"></script>
Copier après la connexion

2.

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()
    })
  }
});
Copier après la connexion
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) { }     // 加载图片失败后的回调函数(默认:不执行任何操作)
  });
});
Copier après la connexion
Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile. l'avenir.

Articles associés :

Fichier de configuration vue-cli (tutoriel détaillé)

Utiliser jQuery pour encapsuler animate.css (tutoriel détaillé)

Comment réinitialiser l'état d'inactivité dans vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal