I do articles on blogs, but I want to know if this code can be simplified so that the page is faster without affecting other things
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- easd descargas texto -->
<ins class="adsbygoogle" style="display: block;" data-ad-client="ca-pub-xxxxxxxx" data-ad-slot="xxxxxxxxx" data-ad-format="link" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Try wrapping it in window.addEventListener("DOMContentLoaded", () => {...});, which will wait for the HTML to load before executing that piece of JS.
There still might be a bit of lag while the advertisements load, but there's not much you can do as that depends on the advertisement. You're letting other code run on your site, so you have no control over what it is, only when it is loaded.
Related
I have one cordova app that loads content directly from client website.I have used it like <content src="https://example.com/ios/index.html"> in config.xml file.I have used the splashscreen delay of 6 seconds.and the issue is when the splash screen hides shows the black screen for 5-10 seconds and after that client website content is shown.and also sometimes i am getting the error CONNECTION TO SERVER WAS UNSUCCESSFULL.I have also specified <preference name="loadUrlTimeoutValue" value="700000" /> but still having same issue.Anyone having the same issue for cordova ios and android app?can anyone help me with this issue.
You shouldn't do it like that. Now I don't want to play this script where you ask A and I tell you to do B, don't worry, but it's really not the way you should do it.
You should make cordova load an index.html which loads a javascript file cordova.js. You don't need to actually have it, the js file will be included when you compile the app.
Then you should add the whitelist plugin in case you don't already it, in order for your website to load correctly. https://www.npmjs.com/package/cordova-plugin-whitelist
You should disable auto-hide for the splashscreen in config.xml like so:
<preference name="AutoHideSplashScreen" value="false" />
You should then make the javascript load a fullscreen iframe with your website like so, then detect when loading has finished: (This should go into your index.html, in the cordova app)
<html>
<head>
<title></title>
</head>
<body>
<iframe id='frameid' onload='iframeLoaded();' src='https://mywebsite.com/mypage.html' style='border: 0; width: 100%; height: 100%'>Your browser doesn't support iFrames.</iframe>
<script src='cordova.js'></script>
<script>
iframe = document.getElementById("frameid");
iframe = document.getElementById("frameid");
function ready(callback){
// in case the document is already rendered
if (iframe.readyState!='loading') callback();
// modern browsers
else if (iframe.addEventListener) iframe.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (iframe.readyState=='complete') callback();
});
}
ready(function(){
setTimeout(function(){
navigator.splashscreen.hide();
},555)
});
</script>
</body>
</html>
I haven't used cordova for a few months but that's how I did it if I didn't forget anything - Hoping I didn't... I didn't have time to test this, but you get the gist:
App start
Show Splashscreen
Load Index.html with Iframe in fullscreen pointing to https website.
Wait for iframe to finish loading.
Close splashscreen
Tell me if you run into any issue and I can help you further.
Scenario:
I'm using Android Robotium Solo (v5.6.3) to automate web page interactions within my app. I need to automate data entry into INPUT fields that are contained within an IFRAME but I do not have much luck!
The Problem:
When I attempt to use, for example, solo.waitForWebElement(By.id("room-number", 5000, true) and solo.typeTextInWebElement(By.id("room-number", "101"), solo is unable to locate the element.
The discussion on this related issue "Accessing an iFrame inside a WebView #794" (https://github.com/RobotiumTech/robotium/issues/794), suggests that it's possible to use "solo.getConfig().webFrame = XXX" to focus solo on the content of a specific IFRAME and then access the WebElements. Unfortunately, I've not been able to get it to work and haven't been able to find any full examples. I assume XXX might need to be the "id" of the IFRAME but in my scenario (where I don't have control of the source code for the web pages being automated) the IFRAME tag has no id assigned.
I've created a simple example test scenario:
index.html - the main page that hosts the IFRAME
<html>
<body bgcolor="#AA3333">
<div id="wrapper">
<iframe src="embed.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
embed.html - the source for the IFRAME that contains the INPUT element.
<html>
<body bgcolor="#3333AA">
<div id="page-container" style="height:100vh; width:100%;">
<label>Room Number</label>
<input type="text" name="ROOM_NUMBER" id="room-number">
</div>
</body>
</html>
After reviewing the source code for Robotium in more detail I confirmed that using
solo.getConfig().webFrame = ['id' of IFRAME as a String]
allows subsequent calls to solo.typeTextInWebElement etc. to work OK as expected.
The trick in my scenario is that the parent page assigned no id to the IFRAME so I programatically assign one at runtime using the following javascript
document.getElementsByTagName("iframe")[0].id = "test";
and then use
solo.getConfig().webFrame = "test"
I got one strange behavior from JQM page.
I am using phonegap-android 4.4.2 with eclipse IDE.
Page code :
<html>
<head></head>
<body>
<div data-role="page" id="folfirstForm" data-dom-cache="true">
<link rel="stylesheet" href="../../css/follow_up.css">
<script src="../../js/addProdLine.js"></script>
<script type="text/javascript">
$(document).off("pageshow", "#folfirstForm").on("pageshow", "#folfirstForm", function() {
alert("First form loaded!");
AddElement();
});
</script>
----Some body----
</body>
</div>
</div>
</html>
You can see on code that I have put data-dom-cache="true" as per my requirement. I have also include the js file named as addProdLine.js which contains functions that i required, (for e.g. The AddElement() is from include file it self).
Now, when i am visiting this page first time all the functionality works very well. On second visit on same page I am getting the previous state of form which is expected as i have put data-dom-cache="true". But Might be due to data-dom-cache="true" my external js files are not being loaded on the second time visit on same page. I want, that on every visit ,my js file should run.
Jquery mobile only loads tag once when whole document is loaded. After the document is loaded if you will click on other links then only content part data-role=page will be refreshed through ajax along with data transition effect. Hence either add all your js script in a file and add it into head tag or stop loading other pages through ajax using following option:
<a href="#" data-ajax=”false”>Without Ajax</a>
But if you will disable content loading using ajax then link will work as it works in normal webpage and also transition effect will be not exist.
Edit:
One Alternate way could be: you can append some random values to the path of your JS files.
<script src="../../js/addProdLine.js?Q=<?php echo time(); ?>"></script>
I am trying to make a slideToggle work properly on the Android devices. I mean... it works fine, but the slideToggle lags or chops. Here is my code and maybe you guys can help me with this.
EDIT
I have been using PhoneGap, and done some research. PhoneGap, apparently, doesn't do well with rendering a lot of media. I chopped down half my content, and realized that the effect works perfectly. However; the effect still chops. Is there a way to optimize PhoneGap to properly render media? I have tried CSS3, but the rendering is still horrible. I changed my images format to GIF, and still no luck. What is my alternative, here? If PhoneGap is the issue, then what should I do to create my Web Based apps?
jQuery
$( ".info" ).click( function(){
$( this ).prev( ".tut-box" ).children( ".info-txt" ).slideToggle( "slow" );
$( this ).toggleClass( "active" );
if ( $( this ).text() == "HIDE INFO" )
$( this ).text( "SHOW INFO" )
else
$( this ).text( "HIDE INFO" );
});
HTML
<div class="tut-box">
<img src="blah.jpg" />
<span class="arrow"></span>
<div class="info-txt">
<div class="txt">
DISPLAY MESSAGE GOES HERE!
<div class="fade"></div>
</div>
</div>
</div>
<div class="info">SHOW INFO</div>
I solved the problem by optimizing my script to CSS3 implemented with jQuery 2. So far; no slow animations or slow actions. I also replaced this...
$( ".info" ).click( function(){
to this...
$( ".info" ).on( 'touchstart', function(){
It makes tapping actions respond faster. I've discovered this within posts and jQuery Mobile books. Thanks, for the help, Flash Thunder. We tried xD
I had alot of problems with smooth jQuery animations on Android tablets, but I found a solution that worked for me. Try using this plugin - it basically converts every animation it can to transitions.
I am currently exploring jQuery Mobile's functionalities. I am quite intrigued by the way Google Play Store handles horizontal sliding, hence, when the user slide taps to the right, the view should slide to the next page and when the user slide taps to the left the view should scroll to the previous page, if any. I know this can be done using native jQuery but I'm not yet familiar with events on mobile devices and I'm sure there is already a built-in functionality for this.
I'd like to try this first with Android devices and if possible with iPad and iPhone. Can anybody guide me on ways to accomplish this?
BTW, I'm not talking about browser history here, probably just some div, pages, if possible.
It can be done but you will be sadly disappointed.
It can be achieved like this:
Multiple page's inside one single HTML. Every page will have swipeleft and swipe right binded to it. When event is triggered changePage() function will make a transition to previous/next page. This sounds excellent and works just fine on desktop browser but fails miserable when executed with phonegap on android phones. Transitions are still a huge problem on android phones, iOS fares better but not to much.
Something like this:
$('#page-two').on('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).on('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Swipe events are supported with jQuery Mobile so no need for 3rd party plugins.
Use a jQuery Mobile carousel plugin like this example: http://jsfiddle.net/blackdynamo/yxhzU/
Original plugin: https://github.com/blackdynamo/jQuery-Mobile-Carousel
Unlike page transitions this plugin will give you much better feeling on mobile phones.
What ever path you choose android tab look will be achieved with navbar inside a second header:
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header">
<div data-role="navbar">
<ul>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
</ul>
</div><!-- /navbar -->
</div>
Solution #1 -- This should be the easy way to do it:
<script>
$(document).delegate("#homepage", 'pageinit', function (evt) {
$(this).bind("swipeleft", function (e) {
$.mobile.changePage("#anotherpage", {
transition : 'slide'
});
});
}).delegate("#anotherpage", 'pageinit', function (evt) {
$(this).bind("swiperight", function (e) {
$.mobile.changePage("#homepage", {
transition : 'slide',
reverse : true
});
});
});
</script>
Solution #2 -- This one is even much simpler:
$('#homepage').bind('swipeleft', function() {
$.mobile.changePage('#anotherpage', {transition: 'slide', reverse: false});
});
$('#anotherpage').bind('swiperight', function() {
$.mobile.changePage('#homepage', {transition: 'slide', reverse: true});
});