I am trying to call re-sizing function after lazy loading of image. I have simple jquery plugin given below that can resize and crop the image to correct size by tweaking the image url.
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);
});
}
HTLM:
<div class="crop">
<img data-src="images/uxzfpd-t500x500.jpg"/>
</div>
onload handler called when element is successfully loaded by LazyloadXT plugin. But it unable call my jquery Image Crop plugin. See Fiddle:http://jsfiddle.net/e0myc0po/12/
My question it why it’s not working or Image Crop plugin is not working? Image should crop to 200X150 Px, but it's still 500x500 Px (original size).
Thanks.
Move your $.extend block to the end after lazyLoadXT:
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);
});
}
/* LazyLoadXT */
! 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),
function(a) {
var b = a.lazyLoadXT;
b.selector += ",video,iframe[data-src]", b.videoPoster = "data-poster", a(document)
.on("lazyshow", "video", function(c, d) {
var e = d.lazyLoadXT.srcAttr,
f = a.isFunction(e);
d.attr("poster", d.attr(b.videoPoster))
.children("source,track")
.each(function(b, c) {
var d = a(c);
d.attr("src", f ? e(d) : d.attr(e));
}), this.load()
})
}(window.jQuery || window.Zepto || window.$);
$.extend($.lazyLoadXT, {
onload: myfunc
});