Javascript GridLayout ListView的渲染速度非常慢-WinJS
这是我的第一个Windows 8应用程序。。。在接受它之前,我遇到了最后一个问题。:) 我有一个布局设置为GridLayout的ListView。加载主页时,应用程序会向ListView的数据源添加50个项目。ListView渲染需要5-6秒。 NB:将项目添加到数据源后5-6秒。XHR/AJAX调用+加载需要200-300毫秒Javascript GridLayout ListView的渲染速度非常慢-WinJS,javascript,listview,windows-8,winjs,Javascript,Listview,Windows 8,Winjs,这是我的第一个Windows 8应用程序。。。在接受它之前,我遇到了最后一个问题。:) 我有一个布局设置为GridLayout的ListView。加载主页时,应用程序会向ListView的数据源添加50个项目。ListView渲染需要5-6秒。 NB:将项目添加到数据源后5-6秒。XHR/AJAX调用+加载需要200-300毫秒 这似乎很奇怪。我在下面添加了一些代码: JS-定义ListView和数据源 this.categoryProducts = new WinJS.Binding.Lis
这似乎很奇怪。我在下面添加了一些代码: JS-定义ListView和数据源
this.categoryProducts = new WinJS.Binding.List();
this.productListview = element.querySelector('#category-products-listview').winControl;
this.productListview.itemTemplate = element.querySelector('#product-template');
this.productListview.itemDataSource = this.categoryProducts.dataSource;
this.productListview.oniteminvoked = this._product_clicked.bind(this);
_ref = data.products;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
product = _ref[_i];
_results.push(Category.categoryProducts.push(product));
}
JS-向数据源添加项目
this.categoryProducts = new WinJS.Binding.List();
this.productListview = element.querySelector('#category-products-listview').winControl;
this.productListview.itemTemplate = element.querySelector('#product-template');
this.productListview.itemDataSource = this.categoryProducts.dataSource;
this.productListview.oniteminvoked = this._product_clicked.bind(this);
_ref = data.products;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
product = _ref[_i];
_results.push(Category.categoryProducts.push(product));
}
\u ref=data.products;
_结果=[];
对于(_i=0,_len=_ref.length;_i<_len;_i++){
产品=_ref[_i];
_结果.推送(类别.分类产品.推送(产品));
}
HTML:
<div id="product-template" data-win-control="WinJS.Binding.Template">
<div class="item product">
<img class="item-image" src="/images/shopping-bag.png" data-win-bind="src: thumbnail; alt: name" onError="this.src='/images/shopping-bag.png';" />
<div class="item-details" >
<div class="item-details-top">
<h4 class="item-title" data-win-bind="textContent: name"></h4>
</div>
<div class="item-details-bottom">
<div class="price"> <span style="font-weight:bold;">$</span> <span data-win-bind="textContent: price"></span></div>
<div class="reviews" ><span class="icon-comments"></span> <span data-win-bind="textContent: reviews_count"></span></div>
<div class="stars" > <span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span> <span data-win-bind="textContent: stars"></span></div>
</div>
</div>
</div>
</div>
$
这就是ListView在渲染时的外观
有什么想法吗?在设置ListView之前或之后,是否向数据源添加项目?不是说这就是它,而是想知道,如果你以现在的方式添加项目,是否会获得大量的客户流失。我将下拉项目并创建一个新的绑定列表,然后设置数据源 我已将100个项目加载到listView中,延迟最小
您的里程数可能会有所不同…如果在将数据源传递到listview之前将所有项目添加到数据源会怎么样?奇怪的是。。。成功了!第一列几乎立即加载,其他列延迟加载。也。。。我要感谢你的Youtube视频!在开发的最初几天,他们确实帮助了我。:)抱歉拉了一点。。。但是你知道为什么只有第一列会立即加载吗?其他列仍有延迟。谢谢:)