加载此 jquery 插件后删除特定类

Posted 2023-02-25

【中文标题】加载此 jquery 插件后删除特定类

【英文标题】：Remove specific class after this jquery plugin load

【发布时间】：2015-04-27 14:33:21

【问题描述】：

我正在尝试从元素（图像）中删除 .lazy-hidden 类。我有下面给出的简单 jquery 插件，它可以通过调整图像 url 来调整图像大小和裁剪图像以正确大小。所以它在 LazyloadXT 加载图像后调用重新调整大小功能。问题是图像已加载和裁剪，但无法从元素中删除.lazy-hidden 类，它是opacity=0。 Fiddle >> 裁剪 Js：

$.extend($.lazyLoadXT, 
  onload: myfunc
);

function myfunc() 
  var w = 200;
  var h = 150;
  $('.crop').find('img').each(function(n, image) 
    var image = $(image);
    image.attr(
      src: image.attr('src').replace(/s\B\d2,4/, 's' + w + '-h' + h + '-c')
    );
    image.attr('width', w);
    image.attr('height', h);
  );

/*Resize js end*/


/* LazyLoadXT Plugin start: */

! function(a, b, c, d) 
  function e(a, b) 
    return a[b] === d ? t[b] : a[b]
  

  function f() 
    var a = b.pageYOffset;
    return a === d ? r.scrollTop : a
  

  function g(a, b) 
    var c = t["on" + a];
    c && (w(c) ? c.call(b[0]) : (c.addClass && b.addClass(c.addClass), c.removeClass && b.removeClass(c.removeClass))),
      b.trigger("lazy" + a, [b]), k()
  

  function h(b) 
    g(b.type, a(this)
      .off(p, h))
  

  function i(c) 
    if (A.length) 
      c = c || t.forceLoad, B = 1 / 0;
      var d, e, i = f(),
        j = b.innerHeight || r.clientHeight,
        k = b.innerWidth || r.clientWidth;
      for (d = 0, e = A.length; e > d; d++) 
        var l, m = A[d],
          o = m[0],
          q = m[n],
          s = !1,
          u = c;
        if (z(r, o)) 
          if (c || !q.visibleOnly || o.offsetWidth || o.offsetHeight) 
            if (!u) 
              var v = o.getBoundingClientRect(),
                x = q.edgeX,
                y = q.edgeY;
              l = v.top + i - y - j, u = i >= l && v.bottom > -y && v.left <= k + x && v.right > -x
            
            if (u) 
              g("show", m);
              var C = q.srcAttr,
                D = w(C) ? C(m) : o.getAttribute(C);
              D && (m.on(p, h), o.src = D), s = !0
             else B > l && (B = l)
          
         else s = !0;
        s && (A.splice(d--, 1), e--)
      
      e || g("complete", a(r))
    
  

  function j() 
    C > 1 ? (C = 1, i(), setTimeout(j, t.throttle)) : C = 0
  

  function k(a) 
    A.length && (a && "scroll" === a.type && a.currentTarget === b && B >= f() || (C || setTimeout(j, 0), C = 2))
  

  function l() 
    v.lazyLoadXT()
  

  function m() 
    i(!0)
  
  var n = "lazyLoadXT",
    o = "lazied",
    p = "load error",
    q = "lazy-hidden",
    r = c.documentElement || c.body,
    s = b.onscroll === d || !!b.operamini || !r.getBoundingClientRect,
    t = 
      autoInit: !0,
      selector: "img[data-src]",
      blankImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC",
      throttle: 99,
      forceLoad: s,
      loadEvent: "pageshow",
      updateEvent: "load orientationchange resize scroll touchmove focus",
      forceEvent: "",
      oninit: 
        removeClass: "lazy"
      ,
      onshow: 
        addClass: q
      ,
      onload: 
        removeClass: q,
        addClass: "lazy-loaded",
      ,
      onerror: 
        removeClass: q
      ,
      checkDuplicates: !0
    ,
    u = 
      srcAttr: "data-src",
      edgeX: 0,
      edgeY: 0,
      visibleOnly: !0
    ,
    v = a(b),
    w = a.isFunction,
    x = a.extend,
    y = a.data || function(b, c) 
      return a(b)
        .data(c)
    ,
    z = a.contains || function(a, b) 
      for (; b = b.parentNode;)
        if (b === a) return !0;
      return !1
    ,
    A = [],
    B = 0,
    C = 0;
  a[n] = x(t, u, a[n]), a.fn[n] = function(c) 
      c = c || ;
      var d, f = e(c, "blankImage"),
        h = e(c, "checkDuplicates"),
        i = e(c, "scrollContainer"),
        j = ;
      a(i)
        .on("scroll", k);
      for (d in u) j[d] = e(c, d);
      return this.each(function(d, e) 
        if (e === b) a(t.selector)
          .lazyLoadXT(c);
        else 
          if (h && y(e, o)) return;
          var i = a(e)
            .data(o, 1);
          f && "IMG" === e.tagName && !e.src && (e.src = f), i[n] = x(, j), g("init", i), A.push(i)
        
      )
    , a(c)
    .ready(function() 

      g("start", v), v.on(t.loadEvent, l)
        .on(t.updateEvent, k)
        .on(t.forceEvent, m), a(c)
        .on(t.updateEvent, k), t.autoInit && l()
    )
(window.jQuery || window.Zepto || window.$, window, document);

LazyloadXT 插件成功加载元素时调用的onload 处理程序。

HTLM：

<div class="crop">
<img data-src="images/uxzfpd-t500x500.jpg"/>
</div>

CSS：

.lazy-hidden 
opacity: 0;

.lazy-loaded 
opacity: 1;

图像已加载并裁剪，但 LazyLoadXT 插件无法删除 .lazy-hidden

请不要将 css: .lazy-hidden opacity: 0; 更改为 .lazy-hidden opacity: 1; 我正在尝试删除 .lazy-hidden 类。 我的尝试（无效）：

if ($(".crop").is(':visible')) 
$(".lazy-hidden").removeClass("lazy-hidden").addClass("lazy-loaded");

有什么建议吗？谢谢。

【参考方案1】：

由于您要覆盖 onload 事件的默认行为，您可以只在 myfunc (http://jsfiddle.net/e0myc0po/19/) 中更新图像类

function myfunc() 

    $(this).removeClass("lazy-hidden").addClass("lazy-loaded"); 

     var w = 200;
     var h = 150;
     $('.crop').find('img').each(function(n, image) 
          var image = $(image);
          image.attr(
                src: image.attr('src').replace(/s\B\d2,4/, 's' + w + '-h' + h + '-c')
          );
          image.attr('width', w);
          image.attr('height', h);
     );