根據屬性

Question

中指定的大小動態更改圖片我正在構建一個CMS系統用戶可以在其中管理和上載圖像以在博客上顯示。

爲了提高效率，我創建了三種不同尺寸的圖像。但最終用戶並不知情。

我要當所見即所得的編輯器用戶改變其尺寸，圖像URL應作相應的修改，以適應「圖標」，「大拇指」，「大」類型的圖像。我可以通過解析服務器端的內容來做到這一點，但在客戶端沒有任何標準的方法嗎？

Answer 1

假設你的形象有一個網址，像這樣： http://example.com/image.jpg

你可以做這樣的事情

$(document).ready(function(){ 
    $('img').each(function(){ 
     var src = $(this).attr('src'); 

     //the extension of the image (e.g. png, gif, jpeg) 
     var extension = src.substr((src.lastIndexOf('.') +1)); 

     //the path to the image, without the extension (and without the .) 
     var path = href.substr(0, href.length - extension.length - 1); 

     //we will store our new path here 
     var newSrc = ''; 

     //get the correct path, depending on the size of the image 
     if($(this).width() < 150){ 
      newSrc = path + '-icon.' + extension; 
     } 

     if($(this).width() < 350){ 
      newSrc = path + '-thumb.' + extension; 
     } 

     if($(this).width() > 350){ 
      newSrc = path + '-full.' + extension; 
     } 

     //give our image the new image path, to either an icon, thumb or full image 
     $(this).attr('src', newSrc); 
    } 
});