backbone.js - Backbone Marionette: Don't display view before all images have loaded -

I am displaying a holistic view, in which each model has an asset that is the URL for an image. If I only show the scene in one area then loading of images is not finished, which does not look too sexy (are displayed when they are loaded).

As long as I do not load all the images, before I display the view, the image is trying to work by defining this image load, but it is probably not correctly (Maybe it should be done on the model?).

  application / list_view.js  

app.module ("ApplicationsApp.List", function (list, application, spine, puppet, $ , _) {List.Application = Marionette.ItemView.extend ({tagname: 'li', template: Templates.applications.application}); List.Applications = Marionette.CompositeView.extend ({className: "Application", Template: Templates.applications.applications, childview: List.Application, childViewContainer: "UL"}}}};

  Application / List_controller.js  

  App.module ("ApplicationsApp.List", function (list, application, spine, puppet, $, _) {List.Controller = {listApplications: function () {// Set Layout App.trigger ("Set: Layout: authenticated "); // Bring Applications FetchingApplications = App.request ('Applications: Institutions'); $ .feline (fetchingApplications) .done (function (applications) {var applicationsListView = new List.Applications ({archive: applications}); deferreds = []; applications.each (function (application) {deferreds.push (function ( ) {Var loader = new image (); loader.onload = function () {console.log (application.get ("IMAGE_PATH"));}; loader.src = application.get ("IMAGE_PATH");}); }); $ When apely ($, deferred). Then (function () {App.layout.mainRegion.show (applicationsListView);})}}); }}; });  

I think your approach True, I would try to include data / image loading in a function, perhaps using a repository

  $ When (applicationsRepository.getAll ()). Then (function (app) {Var appsView = New App.Views.ApplicationListView ({archive: app}); App.layout.mainRegion.show (appsView);});  

Therefore, this code will be part of your controller, because you already have it, when the repository controller is loading, then just present the data when viewing the controller, on the server side With the same few MVC repositories,

getAll () will contain the code that is on the controller to load your data and images, the repository will be an additional module on your desert application.

Then your method will get something like that

  var getAll = function () {var deferred = $ .define (); _getAll (function (app) {deferred.resolve (apps);}); Refund postponed (published); }; Var _getAll = function (callback) {// code to create apps collection app.on ("reset", function (applications) {// load images // callback (application);}); Apps.fetch ({reset: true}); };  

To identify and execute some actions (callback) after the final image load, I will probably use a counter set on the total number of copies (from the collection), and every It must be subtracted once a load handler is executed. $ (Window) .load () may be and this option will be complete when the page is loaded.

Thank you.