在此jquery插件加载后删除特定的类 [英] Remove specific class after this jquery plugin load
问题描述
我正在尝试从元素（图片）中删除 .lazy-hidden 类。我在下面给出了简单的jquery插件，可以通过调整图像URL来调整大小并将图像裁剪为正确的大小。所以它在LazyloadXT loding图像之后调用重新调整大小的函数。问题是图像已经加载并且有问题，但是无法从元素中删除 .lazy-hidden 类，它的 opacity = 0 。
小提琴>>
$
裁剪Js：
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 元素成功加载时调用的处理程序通过 LazyloadXT 插件。
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;
}
图片已加载并损坏，但 LazyLoadXT 插件无法删除 .lazy-hidden
Image has loaded and croped, But LazyLoadXT Plugin unable to remove .lazy-hidden
请不要更改css： .lazy-hidden {opacity：0;} to .lazy-hidden {opacity：1;}
我正在尝试删除 .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");
}
有任何建议吗？谢谢。
推荐答案
因为你要覆盖 onload 的默认行为事件，你可以从 myfunc 中更新图像类（ http://jsfiddle.net/e0myc0po/19/ ）
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);
});
}
这篇关于在此jquery插件加载后删除特定的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
