My development team has ran into an issue of our site taking around 6
secconds to load in. We've tried various ways to get around the problem,
but none so far have worked out. When we disable Products.html the page
loads fast, as expected. Does anyone have any idea or solutions why this
problem might occur? We expect it has something to do with the ng-repeat
having to go through 81 JSON Objects, but we can't remove any of the json
(and there's more json to be added).
A product faccet (There are 12)
<div class="toggle" ng-class="(product.facets.json.toggle.brands) ?
'enabled': ''">
<div class="md-padding title" ng-click="product.facets.json.toggle.brands =
! product.facets.json.toggle.brands">{{ trans('filter_brands') }}</div>
<div class="content-ov">
<div class="md-content md-padding">
<div class="value" ng-repeat="item in app.overview.facets.brand track by
item.$hash">
<div class="pg-form-container layout-row layout-align-start-center">
<md-checkbox ng-model="item.selected" md-no-ink>
@{{ ::item.name }} <span class="amount">@{{ ::item.amount }}</span>
</md-checkbox>
</div>
</div>
</div>
</div>
</div>
The JSON from the faccet (They have 10 choices, there are 15 different
objects. The first one has 64 choices.)
[
{
"amount": 0,
"value": "achilles",
"name": "Achilles",
"type": "Budget",
"img": "",
"$hash": "4500a45bbe6a2853"
}
]
Products.html (Contains; HTML, AngularJS, Blade)
<md-card class="layout-column flex-100 product" ng-repeat="product in
app.overview.products track by product.$hash">
<md-card-content class="layout-align-space-between-center
layout-row">
<div class="layout-align-space-between-center layout layout-row
layout-wrap flex">
<div class="layout flex flex-md-100 flex-sm-100">
<div class="flex-none layout layout-column
layout-align-center-center card-media hide-xs">
<img ng-src="@{{ ::product.img }}" alt="@{{
::product.title }}" title="@{{ ::product.title }}">
</div>
<div class="layout layout-column
layout-align-center-start flex">
<h4 class="md-headline">@{{ ::product.title }}</h4>
<span>@{{ ::product.subtitle }}</span>
<div class="layout product-icons product-index">
<div>
<div class="md-icon-button">
<i class="fk fk-gas-station fk-2x"></i>
<span>@{{ ::product.fuel }}</span>
</div>
</div>
<div>
<div class="md-icon-button">
<i class="fk fk-rain fk-2x"></i>
<span>@{{ ::product.wet }}</span>
</div>
</div>
<div>
<div class="md-icon-button">
<i class="fk fk-volume-up fk-2x"></i>
<span>@{{ ::product.decibel }} db</span>
</div>
</div>
<div>
<div class="md-icon-button">
<i class="fk fk-2x"
ng-class="::(product.quality == 'Summer' ? 'fk-sun' : 'fk-snow')"></i>
<span>@{{ ::product.quality }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="layout layout-align-gt-md-end-center
layout-align-space-between-center flex flex-md-100 flex-sm-100">
<div class="layout layout-column
layout-align-center-end product-index">
<div
class="hide-xs">@include('module.products.partials.product-order')</div>
<a class="md-button md-raised md-accent hide
show-gt-sm"
href="./@{{ ::product.link }}">{{
trans('readmore') }}</a>
</div>
<div class="layout layout-column
layout-align-center-end flex-none prices">
<span class="price-old">€ @{{
::product.old_price_format }}</span>
<span class="price">€ @{{
::product.price_format }}</span>
<span>Per band</span>
</div>
</div>
</div>
<a ng-href="./@{{ ::product.link }}" class="product-link"></a>
</md-card-content>
</md-card>
The JSON file (app.overview.products) (There are actualy 81 of these, but
this is just one to keep it shorter.)
[
{
"title": "Duraturn M WINTER",
"subtitle": "205/55 R16 91 V",
"img": "http://images.bandenthuis.nl/tires/duraturn-m-winter.jpg";,
"brand_img": "http://images.bandenthuis.nl/brand/duraturn.jpg";,
"ean": "5420068613014",
"amount": 2,
"max_amount": "",
"decibel": "71",
"fuel": "E",
"inch": "16",
"quality": "Winter",
"wet": "E",
"price_format": "35,23",
"type": "Budget",
"old_price_format": "53,64",
"link": "./p/duraturn-m-winter-do117-205-55-r16/",
"$hash": "2ebb669ce9cbf6ff"
}
]
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
![http://images.bandenthuis.nl/tires/duraturn-m-winter.jpg"](http://images.bandenthuis.nl/tires/duraturn-m-winter.jpg"){kind=link}
![http://images.bandenthuis.nl/brand/duraturn.jpg"](http://images.bandenthuis.nl/brand/duraturn.jpg"){kind=link}