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

Posted 2023-02-25

【中文标题】通过调整图像 url 将图像裁剪为正确大小

【英文标题】：Crop image to correct size by tweaking the image url

【发布时间】：2015-04-14 19:03:56

【问题描述】：

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

延迟加载 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插件加载图像时运行。

谢谢。

【问题讨论】：

使用image.attr("data-src") 而不仅仅是“src”

你好，请举一个小提琴的例子。

jsfiddle.net/v2fud3a4/5

@Jasen 图片仍处于折叠状态，在新标签中打开图片即可看到，仍为 500 X 500 像素

@Aabira 检查这个小提琴jsfiddle.net/e0myc0po

【参考方案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\d2,4/,'s' + w + '-h' + h +'-c'));
  image.attr('width',w);
  image.attr('height',h);
 );

这里是fiddle

【讨论】：

我已经使用了插件功能，所以如果该插件在IE9中工作，这肯定会工作。

可能与您正在使用的其他插件冲突。