Remove specific class after this jquery plugin load

问题

I am trying to remove .lazy-hidden class from element(image). I have simple jquery plugin given below that can resize and crop the image to correct size by tweaking the image url. So it call re-sizing function after LazyloadXT loding of image. Problem is Image has loaded and croped, But unable to remove .lazy-hidden class from element and it's opacity=0. Fiddle >>

Crop 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\d{2,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);

onload handler called when element is successfully loaded by LazyloadXT plugin.

HTLM:

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

CSS:

.lazy-hidden {
opacity: 0;
}
.lazy-loaded {
opacity: 1;
}

Image has loaded and croped, But LazyLoadXT Plugin unable to remove .lazy-hidden

Please don't change css: .lazy-hidden {opacity: 0;} to .lazy-hidden {opacity: 1;}
I'm trying to remove .lazy-hidden class.
My Try(not works):

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

Any suggestion? Thanks.

回答1:

Since you are overriding the default behaviour of the onload event, you could just update the image class from within 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\d{2,4}/, 's' + w + '-h' + h + '-c')
          });
          image.attr('width', w);
          image.attr('height', h);
     });
}

来源：https://stackoverflow.com/questions/29898651/remove-specific-class-after-this-jquery-plugin-load