延遲加載圖像后調用重新調整大小功能

Question

我正在嘗試延遲加載圖像后調用重新調整大小的功能。 我在下面給出了簡單的jquery插件，可以通過調整圖像URL來調整圖像大小並將其裁剪為正確的大小。

裁剪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>

LazyloadXT插件成功加載元素時onload處理程序。 但是它無法調用我的jQuery Image Crop插件。 請參閱小提琴： http : //jsfiddle.net/e0myc0po/12/

我的問題是為什么它不起作用或Image Crop插件不起作用？ 圖片應裁切為200X150 Px，但仍為500x500 Px（原始尺寸）。

謝謝。

Answer 1

將$.extend塊移到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
});

http://jsfiddle.net/e0myc0po/16/