0

In my application i have three ng-repeat sections, that repeats a string and an image, and with smaller content the performance is fine, - but if there is 'alot' (100+) of images, page takes quite a while to load (10+ sec).

<div ng-repeat="data in data">

  <div class="horizontalLabelImageWrap">
    <p> {{data.label | limitTo:50}} </p>
    <div class="imageContainer">
      <img class="thumbnailImage" ng-src="{{::data.image}}" ng-if="data.image != null" ng-mouseover="imageHover($event)" />
    </div>
  </div>

</div>

performance SS from firefox console.

448 KB worth of images shouldent take 7.66s to load ?

performance results from console

I'm pretty confused about the poor performance, is this to be expected with 100+ images ?

Not sure if lazy loading will help me, or if there is just something fundamentally wrong with my setup.

what can i do to improve loading time performance ?

Anders Pedersen
  • 2,255
  • 4
  • 25
  • 49
  • 3
    You should only load images in viewport and lazyload the rest, while user scrolls. See https://css-tricks.com/snippets/javascript/lazy-loading-images/ as an example – Artyom Neustroev Apr 15 '16 at 09:58
  • 3
    Read the answer here: http://stackoverflow.com/questions/7456325/get-number-of-concurrent-requests-by-browser - browsers have a limit of concurrent requests to the same domain. Chrome and Firefox download 6 at a time per domain. Other browsers even less (2-3). – Sergiu Paraschiv Apr 15 '16 at 10:03
  • slow loading of images normally because of server and network issue, get a better one. – YOU Apr 15 '16 at 10:47
  • 1
    The total size of the images is not that important (if you have a fast connection, that is). The problem is the amount of them. Browsers will only download a handful of things at a time, from the same domain. The result is like pouring water out of a bottle: it will not come out all at once. – Sverri M. Olsen Apr 15 '16 at 10:47
  • @SverriM.Olsen Whats the right approach to solving this / avoiding long load time ? – Anders Pedersen Apr 15 '16 at 11:10
  • Also, if i just comment out the data.image section in the ng repeat. It improves the speed vastly - tho the request for the images are still send and stored. - just not shown, so i guess it has something to do with ' too much manipulation ' with that dom ? – Anders Pedersen Apr 15 '16 at 11:27
  • 1
    @AndersPedersen You could serve the images from different subdomains. That would allow the browser to download them more efficiently. It may not be easy to do, however. You can also limit how many images are loaded by lazy-loading them. That is probably the easiest solution to implement. – Sverri M. Olsen Apr 15 '16 at 11:56

0 Answers0