通过调整图像URL将图像裁剪为正确的大小 [英] Crop image to correct size by tweaking the image url

问题描述

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

I am trying to crop Lazyload image to correct size. So i have simple jquery plugin given below that can resize and crop the image to correct size by tweaking the image url. This jQuery code automatically crop the image to the correct size. But when i use Lazyload plugin for load image the script not able to crop image.

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）

HTML: Fiddle: http://jsfiddle.net/kh5btqyu/3/ (with out Lazyload)

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

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

Lazyload HTML: Fiddle: http://jsfiddle.net/v2fud3a4/4/ (unable to crop)

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

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

Actually Lazyload plugin works when we change image src <img src=""/> to data-src <img data-src=""/> and when we scroll down page, when image get window viewport then it replace image link <img data-src=""/> to <img data-src="" src=""/> then images will visible.

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

So my image crop plugin not able to find image scr link. Because for Lazyload plugin we have <img data-src="" src=""/> link. Another reason is my image crop plugin run after page load, but Lazyload make loads image on window viewport, when we scroll down page and image get window view.

我的问题是当lazyload插件替换图像链接< img data-src =/> 到<时，有任何方法可以运行我的图像裁剪插件; img data-src =src =/> ，表示我的裁剪插件在Lazyload插件加载图片时运行。

My question is there are any way to run my image crop plugin, when lazyload plugin replace image link <img data-src=""/> to <img data-src="" src=""/>, means my crop plugin run when Lazyload plugin has loaded image.

谢谢。

推荐答案

诀窍是调用重新调整大小的功能延迟加载图片后。

The trick is to call your re-sizing function after lazy loading of image.

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

这里是小提琴

这篇关于通过调整图像URL将图像裁剪为正确的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！