快捷導(dǎo)航

圖片懶加載imgLazyLoading.js使用詳解

更新時(shí)間：2020年09月15日 17:11:01 作者：吳維煒

這篇文章主要為大家詳細(xì)介紹了圖片懶加載imgLazyLoading.js的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文主要介紹web前端使用圖片懶加載imgLazyLoading ，供大家參考，具體內(nèi)容如下

1、html代碼

//懶加載對象目標(biāo)代碼
<img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png">
//引用本地js
<script src="__PUBLIC__/js/imgLazyLoading.min.js"></script>
<script src="__PUBLIC__/js/imgLazyLoading.js"></script>

2、js代碼

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

imgLazyLoading.js

$(function () {
 $("img").delayLoading({
  //defaultImg: "__PUBLIC__/images/img/loading.gif",   // 預(yù)加載前顯示的圖片
  errorImg: "",      // 讀取圖片錯(cuò)誤時(shí)替換圖片(默認(rèn)：與defaultImg一樣)
  imgSrcAttr: "originalSrc",   // 記錄圖片路徑的屬性(默認(rèn)：originalSrc，頁面img的src屬性也要替換為originalSrc)
  beforehand: 0,      // 預(yù)先提前多少像素加載圖片(默認(rèn)：0)
  event: "scroll",      // 觸發(fā)加載圖片事件(默認(rèn)：scroll)
  duration: "normal",     // 三種預(yù)定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示動畫時(shí)長的毫秒數(shù)值(如：1000),默認(rèn):"normal"
  container: window,     // 對象加載的位置容器(默認(rèn)：window)
  success: function (imgObj) { },  // 加載圖片成功后的回調(diào)函數(shù)(默認(rèn)：不執(zhí)行任何操作)
  error: function (imgObj) { }   // 加載圖片失敗后的回調(diào)函數(shù)(默認(rèn)：不執(zhí)行任何操作)
 });
});

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: