Strange behaviour on preloading web page in WebView

Question

I have the following problem: In my Swing application i'd like to show a web page. In order to do so i use a JFXPanel that contains a WebView. The web page should be loaded in the background and just if the loading process is totally completed i want to make the JFXPanel visible. I use the getLoadWorker().workDoneProperty() method of the corresponding WebEngine to determine if the page is totally loaded.
The problem is, that at the moment the JFXPanel gets visibile I see at first a totally empty panel, and only after a short time the web page in the WebView is visible. I have made a simple Demo Application that reproduces this behaviour. If the page is loaded a button gets enabled and a click on that button adds the WebView to the panel below. Furthermore the following link points to an animated gif which demonstrates the behaviour: http://tinypic.com/view.php?pic=oh66bl&s=5#.Ujv2IhddWKl
Here is the code of the demo application:
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
public class WebViewTest extends javax.swing.JPanel {
   private static JFXPanel browserFxPanel;
   private WebView webView;
   private WebEngine eng;
  * Creates new form WebViewTest
   public WebViewTest() {
  initComponents();
   Platform.setImplicitExit(false);
  browserFxPanel = new JFXPanel();
   Platform.runLater(new Runnable() {
   public void run() {
  webView = createBrowser();
   Scene scene = new Scene(webView);
  scene.setFill(null);
  browserFxPanel.setScene(
  scene);
  * This method is called from within the constructor to initialize the form. WARNING: Do NOT modify this code. The
  * content of this method is always regenerated by the Form Editor.
   @SuppressWarnings("unchecked")
   // <editor-fold defaultstate="collapsed" desc="Generated Code"> 
   private void initComponents() {
  java.awt.GridBagConstraints gridBagConstraints;
  pnlMain = new javax.swing.JPanel();
  showWebpageButton = new javax.swing.JButton();
  setLayout(new java.awt.GridBagLayout());
  pnlMain.setLayout(new java.awt.BorderLayout());
  gridBagConstraints = new java.awt.GridBagConstraints();
  gridBagConstraints.gridx = 0;
  gridBagConstraints.gridy = 1;
  gridBagConstraints.gridwidth = 3;
  gridBagConstraints.fill = java.awt.GridBagConstraints.BOTH;
  gridBagConstraints.weightx = 1.0;
  gridBagConstraints.weighty = 1.0;
  add(pnlMain, gridBagConstraints);
  showWebpageButton.setText("show web page");
  showWebpageButton.setEnabled(false);
  showWebpageButton.addActionListener(new java.awt.event.ActionListener() {
   public void actionPerformed(java.awt.event.ActionEvent evt) {
  showWebpageButtonActionPerformed(evt);
  gridBagConstraints = new java.awt.GridBagConstraints();
  gridBagConstraints.gridx = 1;
  gridBagConstraints.gridy = 0;
  gridBagConstraints.insets = new java.awt.Insets(10, 10, 10, 10);
  add(showWebpageButton, gridBagConstraints);
   }// </editor-fold> 
   private void showWebpageButtonActionPerformed(java.awt.event.ActionEvent evt) {  
  pnlMain.removeAll();
  pnlMain.add(browserFxPanel, BorderLayout.CENTER);
   WebViewTest.this.invalidate();
   WebViewTest.this.revalidate();
   // Variables declaration - do not modify 
   private javax.swing.JPanel pnlMain;
   private javax.swing.JButton showWebpageButton;
   // End of variables declaration 
   private WebView createBrowser() {
   Double widthDouble = pnlMain.getSize().getWidth();
   Double heightDouble = pnlMain.getSize().getHeight();
   final WebView view = new WebView();
  view.setMinSize(widthDouble, heightDouble);
  view.setPrefSize(widthDouble, heightDouble);
  eng = view.getEngine();
  eng.load("http://todomvc.com/architecture-examples/angularjs/#/");
  eng.getLoadWorker().workDoneProperty().addListener(new ChangeListener<Number>() {
   public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
   final double workDone = eng.getLoadWorker().getWorkDone();
   final double totalWork = eng.getLoadWorker().getTotalWork();
   if (workDone == totalWork) {
  showWebpageButton.setEnabled(true);
   return view;
   public static void main(String[] args) {
   SwingUtilities.invokeLater(new Runnable() {
   public void run() {
   final JFrame f = new JFrame("Navigator Dummy");
  f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
  f.setSize(new Dimension(1024, 800));
   final WebViewTest navDummy = new WebViewTest();
  f.getContentPane().add(navDummy);
  f.setVisible(true);
I don''t understand this behaviour in fact that the page should already been loaded. For mee it seems like the WebView starts renderering the site just at the moment when it gets visible. What can I do to achieve that the WebView already shows the loaded web page at the moment it gets Visible (to avoid this flickr effect)?
I have already posted this issue at StackOverflow (see http://stackoverflow.com/questions/18873315/javafx-webview-loading-page-in-background ) but didn't get an answer there and found this forum today.
Thanks in advance!

Answer 1

Try the updated version in this post.
It forces an offscreen snapshot before displaying the webview to ensure all of the rendering is done before the WebView is displayed.
The code is kind of ugly and the "solution" is a bit of a hack, you would probably want to clean it up a bit before using it anywhere (for example it is unnecessary to create a new WebView and snapshot the web page on every load - I just did that to get a feel for a worst case scenario and to try to pinpoint where slowdowns are occurring).
A small rectangle moves back and forth across the top of the screen so that animation smoothness can be monitored.
On the first load there will be a slight stutter in the animation, however the rendered web page appears instantly when the clicks the "Show page" button.
As you say, the stutter only occurs the first time the page is loaded, subsequently everything is smooth.  If you use a regular progress bar rather than an animation, then the initial stutter is likely fine, as people expect to see pauses in progress bars from time to time (most progress reported by progress bars isn't a smooth linear progression).  My guess is that, if you use a regular progress bar, the behaviour experienced with this sample is likely acceptable to almost all users.
Regarding the differences between rendering between JavaFX 2.2 and JavaFX 8, there were many modifications to the internal JavaFX architecture for JavaFX 8 that improved the rendering performance, so that likely accounts for the delta.
import javafx.animation.*;
import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import javafx.util.Duration;
public class WebViewJavaFXTest extends Application {
    public static final String PAGE_URL = "http://todomvc.com/architecture-examples/angularjs/#/";
    private Rectangle distractor;
    @Override
    public void start(Stage stage) throws Exception {
        distractor = new Rectangle(20, 20, Color.CORAL);
        TranslateTransition r = new TranslateTransition(Duration.seconds(10), distractor);
        r.setFromX(0);
        r.setToX(800);
        r.setInterpolator(Interpolator.LINEAR);
        r.setCycleCount(RotateTransition.INDEFINITE);
        r.setAutoReverse(true);
        r.play();
        VBox layout = initView();
        stage.setScene(new Scene(layout));
        stage.show();
    private VBox initView() {
        final ProgressBar progress = new ProgressBar();
        final Button showWebView = new Button("Show Page");
        showWebView.setDisable(true);
        HBox controls = new HBox(
                10,
                progress,
                showWebView
        controls.setAlignment(Pos.CENTER_LEFT);
        Button tryAgain = new Button("Try Again");
        tryAgain.setOnAction(actionEvent ->
                tryAgain.getScene().setRoot(
                        initView()
        StackPane webViewHolder = new StackPane();
        webViewHolder.setPrefSize(1024, 700);
        final WebView webView = new WebView();
        progress.progressProperty().bind(
                webView.getEngine().getLoadWorker().progressProperty()
        webView.setPrefSize(1024, 700);
        webView.getEngine().load(PAGE_URL);
        webView.getEngine().getLoadWorker().stateProperty().addListener(
                (o, old, state) -> {
                    if (state == Worker.State.SUCCEEDED) {
                        webView.snapshot(
                                snapshotResult -> {
                                    showWebView.setDisable(false);
                                    return null;
                                null,
                                null
                    } else {
                        showWebView.setDisable(true);
        showWebView.setOnAction(actionEvent -> {
            controls.getChildren().setAll(
                    tryAgain
            webViewHolder.getChildren().setAll(webView);
        VBox layout = new VBox(
                10,
                distractor,
                controls,
                webViewHolder
        layout.setPadding(new Insets(10));
        return layout;
    public static void main(String[] args) {
        launch();