將新數據添加到集合時，骨幹視圖需要一些時間才能加載

我是新來的骨幹，並且在構建骨幹的CMS上工作。 CMS允許創作者爲網站添加新的主頁。來自API的50個項目的響應大小約爲25mb。我的HTML頁面有一個加載按鈕，可以觸發一個事件並在點擊時加載50個項目。我面臨的問題是視圖需要一些時間才能加載，即使視圖消失，視圖也會消失，並且用戶在加載視圖之前忘記了他的位置。有沒有辦法讓視圖渲染速度更快，因此它不會消失，用戶可以記住他到底在哪裏。加載更多數據的事件在單擊類加載更多按鈕時觸發。這是我的代碼的一部分。的觀點：將新數據添加到集合時，骨幹視圖需要一些時間才能加載

cms.views.Homepages = Backbone.View.extend({ 

events: { 
'click .filter li': 'filterArticles', 
'click .list-column-title' : 'openLink', 
'click .homepageAction': 'updateHomepageStatus', 
'click .more-actions .delete': 'deleteHomepage', 
'click .more-actions .duplicate': 'duplicate', 
'click .editPubDate': 'editPubDate', 
'click .next': 'nextItems', 
'click .prev': 'prevItems', 
'click .load-more': 'loadMore' 
}, initialize: function(homepages, articles) { 

this.template = new EJS({url: 'app/views/root/homepages/homepages.template.ejs'}); 
this.homepagesTableTemplate = new EJS({url: 'app/views/root/homepages/homepages-table.template.ejs'}); 
this.listenTo(cms.data.homepages, 'loaded', this.displayTable,this.render); 
cms.data.homepages.load(); 


this.listenTo(cms.data.homepages, 'nomoreload', this.disableMoreLoad) 

this.initDialogs();}, 


render: function(options) { 

var html = this.template.render({homepages: cms.data.homepages.toJSON()}); 
this.$el.html(html); 
return this; 
}, 

loadMore: function(e) { 
e.preventDefault(); 

this.collection.loadMore(); 
//this.collection.reset(newmodel.loadMore()); 
console.log(this.collection);}

的代碼我的收藏

cms.collections.HomePages = Backbone.Collection.extend({ 

model: cms.models.HomePage, 

currentPage: 0, 

url: function() { 
//console.log(this, this.currentPage) 
return cms.config.BASE_URL + 'cms/homepage?page=' + this.currentPage + '&per_page=50&filter[sort]=creationdate_desc' 
}, 
loadMore: function() { 
this.currentPage ++; 
var self = this; 
this.fetch({ 
    success: function(collection, response) { 
    self.trigger('loaded', null); 
    // if response less than 50 -> end of load  
    console.log(collection); 

    if (response.length === 0) { 
     self.trigger('nomoreload', null); 
    } 

    }, 
    error: function() { 
    self.trigger('loaded', true); 
    }, 
    remove: false 
});

來源

2017-06-15 Karan Sharma

按照今天的標準，在主頁上加載25mb是巨大的。你應該真的嘗試壓縮和優化這個。我想它是爲每個元素加載圖像，所以嘗試調整圖像大小，如果不能優化更多，一次只加載4-5個元素。 –

我實際上並不是只加載圖像的URL，然後將圖像渲染爲圖像。 –

將「」放在頁面上加載圖像。 –

由於Emile Bergeron rightly mentioned，25 MB的是在主頁的大量數據。在這種情況下，您將不得不優化您的代碼，以獲得區塊響應並僅顯示用戶需要的內容。
另一種方法是在網絡工作者中存儲一定數量的數據，這樣您就可以直接從那裏提供大量數據，避免網絡呼叫。根據需要獲取新數據，並通過清除以前的陳舊數據將其存儲在Web工作人員中。

來源

2017-06-15 13:22:53

將新數據添加到集合時，骨幹視圖需要一些時間才能加載

回答

相關問題