Question

我以这种方式使用真正的分页：

<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" >

我想要的是当我选择第二页所有第一页要停止的请求时（目前它们会继续，因为有太大的文件无法如此快速地下载）。

目前，当我选择第二页时，第一页上的图片数据仍会被下载，第二页的速度会慢下来，因为连接繁忙而无法启动它。请帮忙！

Answer 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属性。

如何停止从dataTable中的上一页加载数据？

1 个答案: