Using itemsAfterInsert event for a virtual list

Questions
21

@juliusbangert what is wrong with itemsBeforeInsert? It should do totally same in your case

22

I’ve tried that.
What I’m doing is looping through the items that were or will be inserted and finding the src of any image with a class of .image-cache and .remote, and adding these to the cache. The problem is, this causes a few seconds glitch on the virtual list scrolling; so I figured it might be better to make these calls after the items were inserted.

itemsBeforeInsert: function (virtualList, fragment) {
  $$(fragment).children().each(function(i,v) {
    var $el = $$(v);
    var id = $el.attr('id'), src = $el.find('img.cache-image.remote').attr('src');
    ImgCache.isCached(src, function (path, success) {
      if (! success) {   
        // add to cache;
        ImgCache.cacheFile(src, function (localpath) {
          // store reference to local image path for next time
          self.cache[id] = localpath;
        });
      }
    });
  });
  app.form.storeFormData('cache', self.cache);
},
23

What is in your isCached and cacheFile functions? To prevent glitch you need to remove heavy functions from synchronous flow. E.g. app.form.storeFormData('cache', self.cache); can be used in itemsAfterInsert callback

1 Like
24

Also you need to optimize your renderItem function and not to use Template7.compile there if you have

25

Ah yes, good point about the app.form.storeFormData() call, but I’ve actually not been doing that in recent tests in order to see where the delay is coming from.

The isCached and cacheFile functions are from this library

I went back to using just itemTemplate instead of renderItem because I figured it would be quicker.
Something like this:

itemTemplate:
  '<li id="{{code}}">'+
    '<img class="cache-image {{#if imagelocal}}local{{else}}remote{{/if}} lazy lazy-fade-in" src="{{#if imagelocal}}{{imagelocal}}{{else}}{{image}}{{/if}}" />'+
  '</li>',

My new idea is to do all this on the individual lazyLoaded event. Would that be better?