JSFiddle - React, Tailwind, and code Playground
HTML
scroll down
<br/><br/><br/>
scroll down
<br/><br/><br/>
<br/><br/><br/><br/>
scroll down
<br/><br/><br/>
scroll down
<br/><br/><br/>
<br/><br/><br/><br/>
scroll down
<br/><br/><br/>
scroll down
<br/><br/><br/>
<div class="crop">
<img data-src="http://1.bp.blogspot.com/-R7XPICyjSZA/VRaUCQteV1I/AAAAAAAABLc/PSsERo55dIg/s1600/artworks-000103151765-uxzfpd-t500x500.jpg"/>
</div>
<br/>
Image become collapsed or size is still 500 X 500 px
JavaScript
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 =...