Jquery 可以裁剪外部图像的插件

Question

我正在尝试裁剪 Lazyload 图像以使其大小正确。我有下面给出的简单 jquery 插件，它可以通过调整图像 url 来调整图像大小和裁剪图像以正确大小。此 jQuery 代码会在 Lazyload 插件加载图像后自动将图像裁剪为正确的大小。但它无法裁剪所有图像，只能从所有图像中裁剪一张。

Fiddle: 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" - 将其更改为 class

也制作一个 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

不需要定义相同的函数两次。检查这个 fiddle http://jsfiddle.net/3xphkmsq/ 你只需要提到 class 而不是 id

Jquery 可以裁剪外部图像的插件

Jquery plugin that can crop external images

jquery

image

crop

resize-crop