根据属性

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); 
    } 
});