我以这种方式使用真正的分页:
<p:dataGrid var="p" widgetVar="imagesDataGrid"
value="#{pictureMB.tableDataModel}"
columns="3"
rows="12"
paginator="true"
id="dgPictures"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="12,24,48"
lazy="true" >
我想要的是当我选择第二页所有第一页要停止的请求时(目前它们会继续,因为有太大的文件无法如此快速地下载)。
目前,当我选择第二页时,第一页上的图片数据仍会被下载,第二页的速度会慢下来,因为连接繁忙而无法启动它。 请帮忙!
答案 0 :(得分:1)
您无法停止浏览器下载图片。您最好的选择是不直接使用<img src>
,而是将控件委托给能够在最终用户滚动到图像时延迟加载图像的JavaScript。你可以抓住jQuery Lazyload plugin。它只会加载在浏览器视口中可见的图像,而不会加载滚动阈值以下的图像。 See also the demo
以下是一个使用示例,前提是您已将jquery.lazyload.min.js
文件放在WebContent/resources/scripts
文件夹中:
<h:body>
<h:outputScript name="scripts/jquery.lazyload.min.js" target="head" />
<h:outputScript target="body">$("img.lazy").lazyload();</h:outputScript>
...
<p:dataTable ... var="picture">
<p:column>
<img class="lazy" data-original="#{picture.url}"
width="#{picture.width}" height="#{picture.height}" />
</p:column>
</p:dataTable>
</h:body>
请注意<h|p:graphicImage>
不适用于该作业,因为它总是会自动生成src
属性,而您需要设置data-original
属性。