Backbone Marionette：在所有图像加载之前不要显示视图

Question

Im显示一个CompositeView，其中每个模型都有一个属性，它是图像的url。如果我只是在区域中显示视图，图像尚未完成加载，这看起来不太性感（它们在加载时显示）。

我想在显示视图之前等待所有图像加载完毕。现在，我试图通过推迟图像加载来实现它，但这可能不是正确的方式（也许这应该在模型上完成）。

applications/list_view.js 

App.module("ApplicationsApp.List", function(List, App, Backbone, Marionette, $, _){ 
 

 
    List.Application = Marionette.ItemView.extend({ 
 
    tagName: 'li', 
 
    template: Templates.applications.application 
 
    }); 
 

 
    List.Applications = Marionette.CompositeView.extend({ 
 
    className: "applications", 
 
    template: Templates.applications.applications, 
 
    childView: List.Application, 
 
    childViewContainer: "ul" 
 
    }); 
 

 
});

applications/list_controller.js 

App.module("ApplicationsApp.List", function(List, App, Backbone, Marionette, $, _) { 
 

 
    List.Controller = { 
 

 
    listApplications: function() { 
 
     // Set layout 
 
     App.trigger("set:layout:authenticated"); 
 

 
     // Fetch the applications 
 
     var fetchingApplications = App.request('application:entities'); 
 

 
     $.when(fetchingApplications).done(function(applications) { 
 

 
     var applicationsListView = new List.Applications({ 
 
      collection: applications 
 
     }); 
 

 

 
     var 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.apply($, deferreds).then(function() { 
 
      App.layout.mainRegion.show(applicationsListView); 
 
     }); 
 

 
     }); 
 

 
    } 
 

 
    }; 
 

 
});

Answer 1

我觉得你的做法是正确的，我会尽量封装数据/图像加载功能于一体，采用一个版本库可能是

$.when(applicationsRepository.getAll()).then(function (apps) { 
     var appsView = new App.Views.ApplicationListView({ collection: apps}); 
     App.layout.mainRegion.show(appsView); 
    }); 

因此，该代码将是你控制器的一部分，因为你已经拥有了它，当资源库完成加载控制器只呈现在视图中的数据，类似的东西到服务器端MVC与仓库，

getAll（）将包含您现在在控制器上加载数据和图像的代码，该存储库将作为您的木偶应用程序的额外模块。

所以你的方法GETALL将会像

var getAll = function() { 
     var deferred = $.Deferred(); 
     _getAll(function (apps) { 
      deferred.resolve(apps); 
     }); 
     return deferred.promise(); 
    }; 

    var _getAll = function (callback) { 
     //code to create the app collection 
     apps.on("reset", function(apps){ 
      //load images 
      //callback(apps); 
     }); 
     apps.fetch({ reset: true }); 
    }; 

要确定并进行最后的图像加载后的一些行动（回调），我可能会用一个计数器设定为图像的总数量（从集合），并在每次执行装载处理程序时递减它。 $（window）.load（）可能是和选项，这将在整个页面加载后触发。

谢谢。

Answer 2

最后我做这样的（由Wait for image to be loaded before going on启发）：

applications/list_controller.js 

App.module("ApplicationsApp.List", function(List, App, Backbone, Marionette, $, _) { 
 

 
    List.Controller = { 
 

 
    listApplications: function() { 
 
     self = this; 
 
     // Set layout 
 
     App.trigger("set:layout:authenticated"); 
 

 
     // Fetch the applications 
 
     var fetchingApplications = App.request('application:entities'); 
 

 
     // Perform actions when applications have been fetched 
 
     $.when(fetchingApplications).done(function(applications) { 
 

 
     // Load all images in applications 
 
     var imgLoaders = []; 
 

 
     applications.each(function(application) { 
 
      var src = application.get("image_path"); 
 
      imgLoaders.push(self.loadImage(src)); 
 
     }); 
 

 
     // Perform actions when images have been loaded 
 
     $.when.apply($, imgLoaders).done(function() { 
 
      var applicationsListView = new List.Applications({ 
 
      collection: applications 
 
      }); 
 
      App.layout.mainRegion.show(applicationsListView); 
 
     }); 
 

 
     }); 
 

 
    }, 
 

 
    loadImage: function(src) { 
 
     var deferred = $.Deferred(); 
 
     var img = new Image(); 
 
     img.onload = function() { 
 
     deferred.resolve(); 
 
     }; 
 
     img.src = src; 
 
     return deferred.promise(); 
 
    } 
 

 
    }; 
 

 
});