在 JavaScript 上需要帮助来修剪答案

【问题标题】：Need Help on JavaScript to Trim在 JavaScript 上需要帮助来修剪
【发布时间】：2012-08-30 01:17:40
【问题描述】：

我的服务器空间遇到了一些问题。图像正在使用服务器的所有空间，使其变慢。因为它是一个电子商务网站，所以它不会很慢，否则我们会失去客户。

如果我有以下情况：

SKU's :
ABC123-001 > catName > Phone
ABC753-851 > catName > MAC
AT1233-098 > catName > PC

如何使用 trim 使其如下：

SKU's :
123 > catName > Phone
753 > catName > MAC
1233 > catName > PC

我将在以下脚本中使用：

<script type="text/javascript">
$(function(){
    var sku = $("#ProductBreadcrumb ul li:last").text();
    $(".ProductThumbImage img").attr('src','http://img.example.com/images/'+catName+'/'+sku+'.jpg');
});
</script>

所以，图片链接的输出基本上是：

http://img.example.com/images/phone/123.jpg
http://img.example.com/images/mac/753.jpg
http://img.example.com/images/pc/1233.jpg

所以是的，我必须面对的第一个问题是.. 我该如何修剪它？

我不熟悉 JavaScript，因此非常感谢任何帮助：D

【问题讨论】：

更改名称如何使其更快？
trim 用于从字符串中删除额外的空间但是在你的代码中我没有看到额外的空间
Harry，我忘了说每张图片代表每个不同的项目，每个不同的页面。因为服务器从所有图像所在的实际服务器获取图像，所以它再次复制到在线商店服务器。昨天的一个例子，在我发布这个问题之前，我已经加载了大约 300 张图片，它们变成了 5 GB？！所有图像均小于 500 kb。基本上，服务器所做的就是将图像复制到不同的文件夹并重命名：Zoom_thumb_pictureName.jpg、Zoomed_pictureName.jpg、thumb_pictureName.jpg、pictureName.jpg.. 所以是的.. 它的空间很大！
我得到了很多图像，很多服务器空间部分......然后你将它们移动到一个只托管图像的新服务器上。非常好..但这只会将您的 url 'http://img.example1.com/images/ 的基础更改为 http://img.example2.com/images/ 或其他内容...然后您说客户端（用户）必须加载 300 张 500kb 的图像，即 +/- 150 MB 1 页...大约需要 2 到 3 分钟（取决于您的连接），您应该优化它！仅加载您应该看到的图像。并且不大于严格要求...如果用户单击缩放功能，那么您会加载更大的图片。
如果您在一页上有这么多图像，也许您可以采用google's images search 之类的方法...向下滚动时加载更多，因为无论如何您都无法将它们全部显示在一个屏幕上...

标签： javascript jquery trim

【解决方案1】：

这是一个有效的example。我不确定重命名与性能有什么关系，但你去吧;)

编辑： 抱歉忘记添加其他部分了:) http://jsfiddle.net/Vandeplas/YH9uT/2/

var a = [
    'ABC123-001 > catName > Phone',
    'ABC753-851 > catName > MAC',
    'AT1233-098 > catName > PC'
],
    b=[];

$.each(a, function(index, item){
    //split the folders
    f= item.split(' > ');
    /* take the first folder remove everything after '-' 
     * remove everything non numeric and return it */
    f[0]=f[0].substr(0, f[0].indexOf('-')).replace(/[^0-9]/g, '');
    //rejoin the folders
    b.push(f.join(' > '));
});

console.log(a, b);

【讨论】：

嗯，该功能将适用于每个单独的项目。我没有说清楚，对不起！它将帮助服务器，因为我将图像托管在其他地方，我不需要将图像复制到存储服务器。是否有意义？我尝试了几次，但我无法让它发挥作用。另外，我正在研究如何更改每个类别的每个链接，好吧，我正在尝试指示服务器从每个类别的不同文件夹中获取图像。我知道，这有点令人困惑。即使我还不明白我该怎么做。我只是想看看如果有什么东西可以开始。

【解决方案2】：

编辑：

我已经找到了我正在寻找的解决方案。代码如下：

  <script type="text/javascript">
      $(function(){
         var catname = $("#ProductBreadcrumb ul li:last").previous('a').text();

         $(".ProductThumbImage img").attr('src','http://img.example.com/'+catname+'/default.jpg');
      });
  </script>

因此，如果类别名称为“电话”，则生成的 src 将为 http://img.example.com/phone/default.jpg

顺便说一句，此代码是为了避免 BigCommerce 服务器将所有图像下载到服务器。

【讨论】：