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

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

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=""/>到数据-SRC<img data-src=""/>当我们向下滚动页面，当图像获取窗口视则替换图片链接<img data-src=""/>到<img data-src="" src=""/>然后图像将可见Lazyload插件的工作原理。

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

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

谢谢。

来源

2015-04-14 Aariba

使用'image.attr（ “数据-SRC”）'，而不是仅仅 “SRC” – Jasen

你好，请给一个例子小提琴。 – Aariba

http://jsfiddle.net/v2fud3a4/5/ – Jasen

诀窍是在延迟加载图像后调用您的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

来源

2015-04-14 19:30:36 Kamran

感谢它的工作原理，它在IE9中工作吗？ – Aariba

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

嗨为什么它不能在我的网站上工作：http：//tinyurl.com/kfq35bu请帮助。 – Aariba

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

回答

相关问题