欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2020年09月15日 17:11:01   作者:吳維煒  
這篇文章主要為大家詳細介紹了圖片懶加載imgLazyLoading.js的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

1、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>

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

最新評論