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(); 
 
    } 
 

 
    }; 
 

 
});