jquery - Call re-sizing function after lazy loading of image -
i trying call re-sizing function after lazy loading of image. have simple jquery plugin given below can resize , crop image correct size tweaking 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 loaded lazyloadxt plugin. unable call jquery image crop plugin. see fiddle:http://jsfiddle.net/e0myc0po/12/
my question why it’s not working or image crop plugin not working? image should crop 200x150 px, it's still 500x500 px (original size).
thanks.
move $.extend block 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 = b.pageyoffset; return === d ? r.scrolltop : } 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, = f(), j = b.innerheight || r.clientheight, k = b.innerwidth || r.clientwidth; (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 + - y - j, u = >= 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) { (; b = b.parentnode;) if (b === a) return !0; return !1 }, = [], 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"), = e(c, "scrollcontainer"), j = {}; a(i) .on("scroll", k); (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 = 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 });
Comments
Post a Comment