Обрезать изображение до нужного размера путем настройки URL-адреса изображения

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: Fiddle: http://jsfiddle.net/kh5btqyu/3/ (без Lazyload)

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

Lazyload HTML: Fiddle: http://jsfiddle.net/v2fud3a4/4/ (невозможно обрезать)

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

На самом деле плагин Lazyload работает, когда мы меняем изображение src <img src=""/> к data-src <img data-src=""/> и когда мы прокручиваем страницу вниз, когда изображение получает окно просмотра окна, оно заменяет ссылку на изображение <img data-src=""/> в <img data-src="" src=""/> тогда изображения будут видны.

Так что мой плагин кадрирования изображения не может найти изображение scr ссылка на сайт. Потому что для плагина Lazyload у нас есть <img data-src="" src=""/> ссылка на сайт. Другая причина в том, что мой плагин обрезки изображений запускается после загрузки страницы, но Lazyload make загружает изображение в окно просмотра окна, когда мы прокручиваем страницу вниз, и изображение получает вид окна.

Мой вопрос, есть ли способ запустить мой плагин для обрезки изображений, когда плагин 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);
 });
}

вот скрипка