[英]GridLayout pre-rendering with grey boxes - WinJS
can't wait to get my first app in the Store! 我等不及要在商店买到我的第一个应用了! :) Unfortunately I'm encountering a few minor problems on the way to completion... :)不幸的是,我在完成的路上遇到了一些小问题......
All my GridLayouts areas pre-render with grey boxes shifted to the right. 我的所有GridLayouts区域都预渲染,灰色框向右移动。 [See Images below] [见下图]
The content is loaded via XHR and the images are hosted on a web server. 内容通过XHR加载,图像托管在Web服务器上。
When the grey boxes render, the images have loaded as well. 当灰色框渲染时,图像也已加载。 I was expecting the images to load after the boxes rendered, as it happens on a regular webpage. 我希望在渲染的框之后加载图像,因为它发生在常规网页上。
HTML HTML
<div class="fragment groupeditemspage">
<header aria-label="Header content" role="banner">
...
</header>
<section role="separator">
</section>
<section aria-label="Main content" role="main" id="home-list-views">
<div class="groupeditemslist win-selectionstylefilled" id="homeItems" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none', maxRows: 4 }"></div>
</section>
</div>
CSS CSS
.groupeditemspage section[role=main] {
-ms-grid-row: 3;
-ms-grid-row-span: 3;
display: -ms-flexbox;
-ms-flex-direction: row;
height: 100%;
overflow-x: auto;
position: relative;
width: 100%;
z-index: 0;
}
#collection-list-view-container{
column-fill: auto;
column-gap: 15px;
column-width: auto;
margin-left: 120px;
margin-top: 20px;
width: auto;
height: 80%;
.win-listview{
margin-top: 15px;
height: 100%;
}
.win-surface{
margin: 0px;
}
}
MORE CSS 更多CSS
.groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
margin-bottom: 60px;
margin-left: 45px;
margin-right: 115px;
//margin-top: 128px;
margin-top: 20px;
}
.groupeditemspage .groupeditemslist .win-groupheader {
padding: 0;
}
/* Use grid and top level layout for truncation */
.groupeditemspage .groupeditemslist .group-header {
-ms-grid-columns: minmax(0, max-content) 7px max-content;
-ms-grid-rows: max-content;
display: -ms-inline-grid;
line-height: 1.5;
}
/* Override default button styles */
.groupeditemspage .groupeditemslist .group-header, .group-header:hover, .group-header:hover:active {
background: transparent;
border: 0;
margin-bottom: 1px;
margin-left: 5px;
margin-right: 5px;
margin-top: 1px;
min-height: 0;
padding: 0;
}
.groupeditemspage .groupeditemslist .group-header .group-title {
display: inline-block;
}
.groupeditemspage .groupeditemslist .group-header .group-chevron {
-ms-grid-column: 3;
display: inline-block;
}
.groupeditemspage .groupeditemslist .group-header .group-chevron::before {
content: "\E26B";
font-family: 'Segoe UI Symbol';
}
.groupeditemspage .groupeditemslist{
.win-item{
box-shadow: 0px 0px 10px 3px #ddd;
}
.win-container {
margin-bottom: 1px;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}
}
.groupeditemspage .groupeditemslist .item {
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 90px;
display: -ms-grid;
height: 128px*2-2px;
width: 128px*2-2px;
border: 1px solid #ddd;
.item-image{
}
&.product{
//height: 128px-2px;
//width: 128px-2px;
height: 128px-2px-5px;
width: 128px-2px-5px;
-ms-grid-rows: 1fr 25px;
.item-overlay{
-ms-grid-row: 2;
background: white;
text-align: center;
opaciy: 0.9;
span.icon-star{
color: orange;
}
}
.item-image{
-ms-grid-row: 1;
text-align: center;
//height: 100%;
//-ms-grid-row-span: 1;
img{
height: 140px;
width: 140px;
}
}
}
&.category{
//height: 128px-2px;
//width: 128px*2-2px;
height: 128px-2px;
width: 256px-2px;
-ms-grid-rows: 1fr 40px;
.item-overlay{
//display: none;
background: #111;
color: white;
//font-weight: bold;
//font-size: 24px;
width: 100%;
opacity: 0.95;
padding: 8px 15px;
h4{
width: 100%;
font-size: 18px;
}
}
.item-image{
-ms-grid-row-span: 2;
}
}
&.collection{
//-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 40px;
//display: -ms-grid;
//height: 128px-2px;
//width: 128px*2-2px;
height: 165px-2px;
width: 220px-2px;
&.big{
//height: 128px*2-2px;
//width: 128px*4-4px+20px;
height: 165px*2-2px+2px;
width: 220px*2-2px+2px;
-ms-grid-rows: 1fr 50px;
.item-overlay{
h4{
font-size: 26px;
}
h6{
font-size: 18px;
}
}
}
.item-overlay{
-display: none;
background: #111;
color: white;
//font-weight: bold;
//font-size: 24px;
width: 100%;
opacity: 0.95;
padding: 5px 15px;
h4{
width: 100%;
font-size: 18px;
}
}
.item-image{
-ms-grid-row-span: 2;
}
}
}
.groupeditemspage .groupeditemslist .item .item-overlay {
//-ms-grid-row: 2;
//-ms-grid-rows: 1fr 21px;
//display: -ms-grid;
//padding: 6px 15px 2px 15px;
}
.groupeditemspage .groupeditemslist .item .item-overlay .item-title {
//-ms-grid-row: 1;
overflow: hidden;
width: 220px;
}
.groupeditemspage .groupeditemslist .item .item-overlay .item-subtitle {
//-ms-grid-row: 2;
width: 220px;
}
.groupeditemspage .groupeditemslist .largeitemtemplate .item{
width: 500px + 10px;
height: 500px + 10px;
}
/* Generic styling */
.groupeditemspage .groupeditemslist .item-overlay {
-ms-grid-row: 2;
}
.groupeditemspage .groupeditemslist .item-overlay .item-description {
visibility:collapse;
}
JS JS
listView.layout = new ui.GridLayout({ groupInfo: groupInfo, groupHeaderPosition: "top" });
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
Ebay app does this quite well: 易趣应用程序做得很好:
Any idea what could be happening? 知道会发生什么吗?
Thanks a lot! 非常感谢! :) Hopefully I'll be up and running with my first app very soon! :)希望我很快就能使用我的第一个应用程序运行!
This is the ListViews default "back drop" rendering that it places to enhance perceived performance, by rendering placeholders even before it knows how much data it is rendering. 这是ListViews默认的“后退”渲染,它通过在占位符知道渲染数据之前渲染占位符来增强感知性能。
You can customize it with backdropColor and disable it with disableBackdrop 您可以使用backdropColor自定义它并使用disableBackdrop禁用它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.