How can I show loading on the InAppBrowser

cordova
#1 
<img id="loading" name="loading" src="img/loading.GIF" style="position: absolute;top: 50%;left: 50%;margin-left:-32px;margin-top:-32px;">
<script>
    	$('#loading').hide();
    	document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() 
    	{
    		 ref = window.open('http://mywebsite.com', '_self', 'location=no,zoom=no,hardwareback=yes,hidden=yes');
    		ref.addEventListener('loadstart', function(event) { $('#loading').show(); });
    		ref.addEventListener('loadstop', function(event) { $('#loading').hide(); ref.show(); });
    		ref.addEventListener('loaderror', function(event) { ref.close(); alert("Connection Error!"); ionic.Platform.exitApp();});
    		ref.addEventListener('exit', function(event) {ionic.Platform.exitApp();});
    						 
    	}
</script>

In here I want to show loading.gif on the screen when inappbrowser load any page. But after first load, it doesn’t work anymore. Because loading.gif stays back of inappbrowser. How can I show this gif on the screen with every page load?

#2

i have also the same issue have you solve it

#3

If you are using ngcordova then you should review this plugin provided by ngcordova.

It is quite good and provides good options for loading indicators.

Show and hide are the simple events for displaying loading. So you do not need to write custom css and also do not need to use gif image for loading as well.

#4

i m not looking for plugin i m looking for code which helps me to use loader in event url change event .

#5

@vishal_thakur

you can use pace.js
here is a link
http://github.hubspot.com/pace/docs/welcome/

#6

When I try _self, a black screen is appearing for 3 to 4 seconds prior loading the external url and is creating a very bad user experience. Did any of you guys face the same issue ?

1 Like
#7

Do you have a solution for ionic 3 ? :grimacing:

#8

if you need to show animated image when navigate throught pages in inappbrowser you can use my modified library that suppports it: https://github.com/Ahiaz/toast_with_image