javascript - 根据属性中指定的大小动态更改图像

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