通過調整圖像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來裁剪圖像以調整大小

回答

相關問題