可以裁剪外部圖像的jQuery插件

Question

我正在嘗試將Lazyload圖像裁剪為正確的大小。 我在下面給出了簡單的jquery插件，可以通過調整圖像URL來調整圖像大小並將其裁剪為正確的大小。 Lazyload插件加載圖像后，此jQuery代碼會自動將圖像裁剪為正確的大小。 但是它無法裁剪所有圖像，只能裁剪所有圖像中的一個。

小提琴 ： http : //jsfiddle.net/e0myc0po/4/
看到它只裁剪了3號圖像！

JS：

外部資源 ： https : //cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.0.5/jquery.lazyloadxt.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);
 });
}

function myfunc(){
    var w = 200;
var h = 150;
$('#another-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);
 });
}

HTML：

1
<div id="crop">
<img data-src=""/>
</div>
<br/>
2
<div id="crop">
<img data-src=""/>
</div>
<br/>
3
<div id="another-crop">
<img data-src=""/>
</div>
<br/>
4
<div id="another-crop">
<img data-src=""/>
</div>

所以我的問題是為什么不裁剪所有圖像，解決方案是什么？
謝謝。

Answer 1

簡單。 您有兩個或多個HTML標記的ID和兩個函數myfunc（）的聲明。 單個頁面上任何標簽元素的ID都應該是唯一的！ :)

<div id="crop">
....
<div id="crop-foo">
....
<div id="crop-something-else">

將id =“ crop”更改為class =“ crop”，然后在JS中將#crop更改為.crop，同樣使用：＃another-crop / id =“ another-crop”-將其更改為類

也使一個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);
 });
$('#another-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);
 });
}

工作示例： http : //jsfiddle.net/e0myc0po/6/

Answer 2

無需兩次定義相同的功能。 檢查這個小提琴http://jsfiddle.net/3xphkmsq/，您只需要提及一個class而不是id