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 =＆＃34; crop＆＃34; to class =＆＃34; crop＆＃34;然后在JS #crop到.crop中同样如下：＃another-crop / id =＆＃34;另一种作物＆＃34; - 将其改为班级

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

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

2 个答案: