2

I have a enyo.List with two items: an enyo.Image and a text component. I setSrc on the Image during onSetupItem.

This loads the image immediately , since I have over 10 rows they don't appear till all the images load. Is there anyway to load these images asynchronously (additionally display the image with a "fade-in" animation ?). Thanks.

Sandeep Chayapathi
  • 1,490
  • 2
  • 13
  • 31
  • enyo Images should load asynchronously; if what you're describing is accurate, it may be a bug. What happens if you use `{tag: 'img' ...}` instead? – Travis Webb Mar 13 '13 at 18:50
  • A jsfiddle would help as well when describing these issues. – Travis Webb Mar 13 '13 at 18:51
  • 1
    I was going to say the same thing(s) as Travis. You can look at the sampler to see how images are loaded for the Flickr sample. http://jsfiddle.net/api/post/enyo/nightly/dependencies/onyx,layout,canvas,g11n/ img tag may work better if you don't use the image events. – Pre101 Mar 13 '13 at 20:55

1 Answers1

1

EDIT: Totally wrote this next paragraph backwards. List -is- the flyweight version. You were correct to set the number of rows.

What you may want to do is to replace the List with a Repeater. Because of the flyweight pattern in the Repeater you might not be requesting as many images at once.

Another approach might be to derive a new kind based on a Scroller that detects when images scroll into view and only load them at that time. That is a pretty involved approach and you might need to create a kind based of Image that works hand-in-hand with the other kind.

You could also Google some lazy-loading strategies and see if you can apply those.

Pre101
  • 2,370
  • 16
  • 23
  • Thanks. I found that setting rowsPerPage on enyo.List to a lower number made the enyo.List request only a small subset from the data array. – Sandeep Chayapathi Mar 15 '13 at 09:38