Ember.js: re-order an array of images without re-downloading

Question

I'm new to Ember. My first toy project is an cycling carousel of images.

I'm using an ArrayController to manage the images, and periodically rotating the underlying Array: http://jsbin.com/ePexEwom/14/edit?html,js,output

My question is: every time a rotation occurs (the first image moves to the end), my browser re-downloads the image which is slow and heavy.

This makes me think I should be just re-ordering the DOM elements in the view, rather than the objects in the controller's content, but not sure of the best way to do that...

Any ideas appreciated!

Update: I don't have control over the hosting site, so sending cache headers with the images won't work I'm afraid.

Do you control the site sending the images? They aren't being sent with any caching information — Kingpin2k, Dec 13 '13 at 19:27

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

The best way to handle this is to set the cache expiry on the images. Both IE and FF don't send additional requests, but Chrome thinks you might want the latest and greatest each time, due to no caching values.

No caching of dynamically loaded images in Google Chrome

Cache Expiration On Static Images

edited May 23 '17 at 10:25

Community

1
1

answered Dec 13 '13 at 19:31

Kingpin2k

47,007
10
75
96

I should have said - I don't have control over the hosting site. – James Brady Dec 13 '13 at 20:45

score 0 · Answer 2 · answered Dec 13 '13 at 21:24

0

Creating a custom worked pretty well: http://jsbin.com/ePexEwom/16/edit?html,js,output

Seems clean logically too, because the ordering of the pictures isn't changing in a meaningful way - it's just the presentation layer that needs to be changing.

answered Dec 13 '13 at 21:24

James Brady

21,724
7
48
56

Ember.js: re-order an array of images without re-downloading

2 Answers2