0

我正在尝试将 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>

所以我的问题是为什么它不裁剪所有图像，解决方案是什么？
谢谢。

4

2 回答 2

2

简单的。您有两个或多个 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/

于 2015-04-16T06:07:16.293 回答
1

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

于 2015-04-16T06:12:47.990 回答