Динамическое изменение изображения на основе его размера, указанного в атрибуте

Question

Я создаю систему CMS , где пользователь может управлять и загружать изображения для показа в блоге.

Для повышения эффективности я создаю три версии изображений различного размера. Но конечный пользователь не знает об этом.

То, что я хочу, когда на WYSWYG редактор пользователей изменяет свои размеры, изображение URL должен быть изменен соответствующим образом, чтобы соответствовать «значок», «пальцы», «большие» типы изображения. Я могу это сделать, разобрав содержимое на стороне сервера, но нет ли стандартного способа сделать это на стороне клиента?

Answer 1

Если предположить, что изображение имеет URL так: 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); 
    } 
});