Javascript angularjs和JSON数据加载缓慢-寻找更好的性能

这是我要做的事情的背景

我在一个JSON文件中列出了大约70种我想要管理的产品。该文件由图像数据、标题、副标题和简短描述组成。稍后还会有一个指向PDF文件的链接，因此它也将包含在JSON文件中

这就是JSON文件现在的样子：

[
    {
        "category": "oil",
        "image": "/xps-product-list/img/2-STROKE_MINERAL_OIL_GROUP.jpg",
        "title": "Maintenance and Oil Change Kit Spyder",
        "subTitle": "Engine Oils",
        "description": "Complete maintenance right out of the box: O-Ring, XPS oil, Rotax oil filter and instruction sheet"
    },
    {
        "category": "fuel",
        "image": "/xps-product-list/img/2-STROKE_PREMIX_OIL.jpg",
        "title": "XPS Premix Oil",
        "subTitle": "Engine Oils",
        "description": "Superior performance 2-stroke oil developed especially for Rotax 2-stroke engines. Formulated for fast and easy mixing at very cold temperatures. Please contact your nearest dealer for suggested retail prices of oil based products."
    }
]

我使用AngularJS引入JSON数据，并使用ng repeat指令迭代数据并显示：

function AlbumCtrl($scope, $http, $timeout) {
    $scope.url = 'images.json';



    $scope.handleImagesLoaded = function (data, status) {
        $scope.images = data;
        $scope.currentImage = _.first($scope.images);

    }

    $scope.fetch = function () {
        $http.get($scope.url).success($scope.handleImagesLoaded);
    }

    $scope.setCurrentImage = function (image) {
        $scope.currentImage = image;
    }

    $timeout ($scope.fetch, 1000);
}

然后这是带有ng重复的HTML：

<div id="image-container" ng-controller="AlbumCtrl">
       <div id="header">
          <div class="product-info">
              <ul>
                  <li ng-repeat="image in images | filter:categories">
                      <img ng-src="{{image.image}}" id="small-prod-img"/>
                       <h2>{{image.title}}</h2>
                       <h3>{{image.subTitle}}</h3>
                       <h4>{{image.description}}</h4>
                  </li>
              </ul>
           </div>
       </div>
   </div>     

{{image.title}
{{image.subTitle}
{{image.description}

我觉得应该有一个更干净的方法来做这件事。我遇到的这个问题是图像加载需要很长时间。我一直在使用Firebug开发工具（网络选项卡）查看数据加载的速度。加载数据和加载图像的时间之间存在一致的延迟，通常约为半秒左右

我想我应该创建两个角度部分，一个用于图像，另一个用于数据（标题、副标题、描述），从而分离图像，并希望加快加载时间。或者只是将图像编码到HTML中，然后对其余数据使用一部分。此外，这是我第一次在JSON文件中包含图像数据，所以我不确定这是否是一个好主意。我在网上找不到任何关于JSON中包含图像数据的好的或坏的建议

如有任何建议，将不胜感激

皮特

编辑：忘记提及这将是一个页面，所有产品都加载在同一页面上。我还打算使用这个类别并创建一个下拉页面，这样用户也可以按类别进行筛选

编辑#2-这是firefox开发工具中网络选项卡的图像，您可以清楚地看到加载图像时的延迟：

---

这里有几个选项。一条评论中已经提到了不会改变站点/应用程序体系结构的简单方法：限制一次加载的图像/数据数量。我猜你可以将70个产品分成9个页面（3 x 3网格）。这样，您就可以替换

<li ng-repeat="image in images | filter:categories">

---

直接调用fetch函数即可。可能会节省一秒钟：）

这些图像有多大？请尝试找到一种方法，仅当它们在屏幕上可见时才加载图像，以便在用户打开时，它将逐个加载它们them@prawn这些图像实际上非常小——只有30张左右-50Kb@charlie-你说的是延迟加载图像吗？30KB*70图像的加载量很大默认值。这里的问题不是加载时间太长；开始加载需要花费很长时间，然后我将继续最后一部分，删除$timeout并直接调用函数，因为$timeout延迟了加载的开始时间second@Yatit-我刚进入MongoDB。为我的70个作品建立一个收藏，然后通过AngularJS把它们拉进来，这有多难？您能给我一些简单的说明吗？如果您刚刚开始，可能需要一些时间才能正确实现。它的简单程度部分取决于您的服务器是在什么平台上编写的（我最熟悉node.js）。在您的服务器上，您必须为特定URL编写逻辑，才能从Mongo获取这些图像（即/api/images/）

<li ng-repeat="image in images | filter:categories | limitTo: 9">

$timeout ($scope.fetch, 1000);