通过调整图像裁剪图像以正确大小 url

Question

我正在尝试裁剪 Lazyload 图像以使其大小正确。所以我有下面给出的简单 jquery 插件，可以通过调整图像 url 来调整图像大小和裁剪图像以正确大小。此 jQuery 代码会自动将图像裁剪为正确的大小。但是当我使用 Lazyload 插件加载图像时，脚本无法裁剪图像。

JS:

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);
 });

HTML: Fiddle: http://jsfiddle.net/kh5btqyu/3/（没有延迟加载）

<div id="crop">
<img src=""/>
</div>

Lazyload HTML: Fiddle: http://jsfiddle.net/v2fud3a4/4/（无法裁剪）

<div id="crop">
<img data-src=""/>
</div>

实际上，当我们将图像 src <img src=""/> 更改为 data-src <img data-src=""/> 并且当我们向下滚动页面，当图像获得 window 视口时，它会将图像 link <img data-src=""/> 替换为 <img data-src="" src=""/> 然后图像将可见。

所以我的图像裁剪插件无法找到图像 scr link。因为对于 Lazyload 插件，我们有 <img data-src="" src=""/> link。另一个原因是我的图像裁剪插件运行在页面加载后，但是当我们向下滚动页面和图像时，Lazyload 会在 window 视口加载图像。window 视图。

我的问题是有什么方法可以运行我的图像裁剪插件，当 lazyload 插件将图像 link <img data-src=""/> 替换为 <img data-src="" src=""/> 时，意味着我的裁剪插件运行当 Lazyload 插件加载图像时。

谢谢。

Answer 1

诀窍是在图像延迟加载后调用您的 re-sizing 函数。

$.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);
 });
}

这里是fiddle

通过调整图像裁剪图像以正确大小 url

Crop image to correct size by tweaking the image url

jquery

image

crop

resize-crop