how to display a WebView only after a javascript code is done?

I'm trying to force WebView to 'skip' images by using javascript. (like here: https://stackoverflow.com/a/31848599/13174607).

The problem is that the images are disappeared only after the WebView finished loaded. I want to display the WebView only after the javascript is finished.

This is my code:

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(webView, url);
        webView.loadUrl("javascript:(function(){ var imgs=document.getElementsByTagName('img');" + "for(i=0;i<imgs.length;i++) { imgs[i].style.display='none'; } })()");
    }
});
}

I tried to use setVisibility() method, like this:

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        webView.setVisibility(View.INVISIBLE);
    }
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(webView, url);
        webView.loadUrl("javascript:(function(){ var imgs=document.getElementsByTagName('img');" + "for(i=0;i<imgs.length;i++) { imgs[i].style.display='none'; }  })()");
        webView.setVisibility(View.VISIBLE);

    }
});
}

but it didn't help. Thanks!

EDIT:

By using the proposed solution and the @mustansir comments I wrote this code on 'onPageFinished':

    webView.loadUrl("javascript:" + "function taskOne() {" +
        "var imgFlag = 0;" + //will sign when the for loop ended
        "var imgs = document.getElementsByTagName('img');" +
        "if (imgs==0){imgFlag=1;} " +
        "for (i = 0; i < imgs.length; i++) {" +
        "imgs[i].style.display = 'none';" +
        "if (i==imgs.length-1)" +
        "{" +
        "imgFlag=1;" +
        "}"+
        "}}" +
        "taskOne();" +
        "function taskTwo () {" +
        "if(imgFlag==1){" +
        "window.visibility.changeVisibility(); }" +
        "else {" +
        "setTimeout(taskTwo(),100);}}" +
        "taskTwo();");

but the the webview doesn't become visible. Any idea why?

Solution

You can try injecting a JavaScript interface and call that interface method when you reach at the last image in the loop to change WebView visibility.

Something like this:

webview.addJavascriptInterface(this, "visibility");

and call this interface from your JavaScript like this:

var imgs = document.getElementsByTagName('img');
for (i = 0; i < imgs.length; i++) {
    imgs[i].style.display = 'none';
    if (i == imgs.length-1) {
        visibility.changeVisibility();
    }
}

Now define changeVisibility() with @JavascriptInterface annotation in that activity in which you have added javascriptInterface like this:

@JavascriptInterface
 public void changeVisibility() {
       runOnUiThread(() -> webview.setVisibility(View.VISIBLE));
    }