通過調整圖片網址將圖片裁切為正確尺寸

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=""/>並且當我們向下滾動頁面時，當圖像獲得窗口視口時，它會替換圖像鏈接<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);
 });
}

這是小提琴