Я пытаюсь реализовать бесконечную прокрутку с помощью Primefaces с помощью jQuery Waypoint и Masonry API.Внедрение бесконечной прокрутки в JSF по поверхностям, путевой точке и масонству
Вот то, что я до сих пор:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions">
<f:view>
<h:head>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript name="js/global.js"/>
<h:outputScript name="js/masonry.pkgd.js"/>
<h:outputScript name="js/imagesloaded.pkgd.js"/>
<h:outputStylesheet name="css/global.css" />
<title>Gallery</title>
</h:head>
<h:body>
<h:form prependId="false">
<h:panelGroup id="galleryPanel" layout="block">
<p:outputPanel autoUpdate="true">
<h:panelGroup layout="block" styleClass="galleryContainer">
<ui:repeat id="gallery" value="#{galleryController.images}" var="image">
<h:panelGroup layout="block" styleClass="item">
<h:graphicImage library="images" name="demo/#{image}.jpg" />
</h:panelGroup>
</ui:repeat>
</h:panelGroup>
</p:outputPanel>
<pe:waypoint id="waypoint" widgetVar="waypointWidget" offset="function(){return $.waypoints('viewportHeight') - $(this).outerHeight()}">
<pe:javascript event="reached" execute="handleLoadStart(ext);"/>
</pe:waypoint>
<h:outputScript target="body">
var layout = function(){
var container = $('.galleryContainer');
$(container).imagesLoaded(function(){
$(container).masonry({
itemSelector : '.item',
columnWidth : 240
});
});
};
var handleLoadStart = function(ext) {
if (ext.direction == "down") {
PF('waypointWidget').remove();
moreMedia();
}
};
var handleLoadStop = function(){
layout();
PF('waypointWidget').register();
};
$(document).ready(function(){
layout();
});
</h:outputScript>
<p:remoteCommand name="moreMedia" update="gallery" actionListener="#{galleryController.loadMore}" oncomplete="handleLoadStop()"/>
</h:panelGroup>
</h:form>
</h:body>
</f:view>
</html>
Управляемый Бин:
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.IntStream;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
@ManagedBean(name="galleryController")
@ViewScoped
public class GalleryController implements Serializable {
private static final long serialVersionUID = 563439107531288284L;
private List<String> images;
@PostConstruct
public void initialize() {
images = new ArrayList<>();
IntStream.range(1, 16).forEach(i->images.add(new String("image" + i)));
}
public void loadMore(ActionEvent event){
IntStream.range(1, 16).forEach(i->images.add(new String("image" + i)));
}
public List<String> getImages() {
return images;
}
public void setImages(List<String> images) {
this.images = images;
}
}
Это частично работает, так как он имеет проблемы.
Основная проблема заключается в том, что, добавляя новые изображения в существующий список изображений, ui:repeat полностью выполняет рендеринг. Я не хочу этого делать. Потому что таким образом загружаются и существующие изображения. Современный браузер, такой как FF или Chome, кэширует изображения, поэтому для них это не проблема, но в браузере, таком как IE, я вижу в сетевой консоли, что он отправляет GET для извлечения этих изображений. С точки зрения производительности изображения, которые уже были загружены, не должны извлекаться, а только только что добавленные изображения.
Но я не знаю, как это сделать в JSF!
Также как побочный эффект, масонство не работает должным образом. Каждый раз, когда onCompletep:remoteCommand запускает метод layout(), полоса прокрутки устанавливается в верхнюю часть. С функциональной точки зрения он должен оставаться в этом месте, откуда маршрутная точка запускала следующую нагрузку.
Любое предложение было бы очень полезно.