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：小提琴：http://jsfiddle.net/kh5btqyu/3/（没有Lazyload）

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

Lazyload HTML：小提琴：http://jsfiddle.net/v2fud3a4/4/（无法裁剪）

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

实际上，当我们将图像 src <img src=""/>更改为 data-src <img data-src=""/>时，当我们向下滚动页面时，当图像获取时，Lazyload插件会起作用窗口视口然后它将图像链接<img data-src=""/>替换为<img data-src="" src=""/>，然后图像将可见。

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

我的问题是，当lazyload插件将图像链接<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将图像裁剪为正确的大小

1 个答案: