Вот предыстория того, что я пытаюсь сделать.
У меня есть список из примерно 70 продуктов, которыми я хочу управлять в файле JSON. Файл состоит из данных изображения, заголовка, подзаголовка и краткого описания. Позже также будет ссылка на файл 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);
}
Тогда это HTML с ng-repeat:
<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, где вы можете четко видеть отставание при загрузке изображений:
