Question

以下是我正在尝试做的事情的背景。

我在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-repeat的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>

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

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

任何建议都将不胜感激。

皮特

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

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

enter image description here

Answer 1

这里有几个选项。在评论中已经提到了更容易改变网站/应用程序架构的方法：限制一次加载的图像/数据的数量。我猜您可以将70个产品分成每页9个（3 x 3网格）。这样，您可以替换

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

与

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

你还必须处理显示下一组结果的逻辑，因为上面的实现只显示前9个。

更改应用程序架构的更难但更具伸缩性的方法是使用数据库来存储此信息。我通常使用MongoDB，因为它以JSON格式返回查询，与Angular.js很好地集成，其BSON格式比JSON快得多。

最后，我意识到这条线可能已用于测试，但如果您希望整体请求更快，则可能需要删除

$timeout ($scope.fetch, 1000);

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

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

1 个答案: