0

我正在尝试将 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/（没有延迟加载）

<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 会在窗口视口上加载图像。

我的问题是有什么方法可以运行我的图像裁剪插件，当延迟加载插件替换图像链接<img data-src=""/>到时<img data-src="" src=""/>，意味着我的裁剪插件在延迟加载插件加载图像时运行。

谢谢。

4

1 回答 1

2

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

这是小提琴

于 2015-04-14T19:30:36.267 回答