I'm having a very difficult time improving the page load time of a page that requires many database calls. It takes about 5 seconds to load.
Here's my situation. I have two separate single page tempates, FastPage.pl and SlowPage.pl. FastPage.pl downloads quickly, SlowPage.pl is the slow loading page with many calls. I have the following navbars for FastPage.pl and SlowPage.pl:
<!--Page A Navbar-->
<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Fast Page</li>
<li>Slow Page</li>
</ul>
</div>
</div>
<!--Page B Navbar-->
<div data-role="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Fast Page</li>
<li>Slow Page</li>
</ul>
</div>
</div>
So here's the problem I'm having:
Scenario 1: Load FastPage.pl first
Load FastPage.pl first, it loads instantly.
Click on SlowPage.pl link, it loads instantly (apparently because of prefetch).
Click back to FastPage.pl. It loads instantly.
Click back to SlowPage.pl. This page now loads very slowly.
Clicking back and forth between links, SlowPage.pl now always loads slowly even though it loaded quickly in step 2. Why doesn't it still load quickly like in step 2?
Scenario 2: Load SlowPage.pl first
Load SlowPage.pl first, it loads slowly, as expected.
Click on FastPage.pl link, it loads instantly.
Click back to SlowPage.pl. It loads instantly.
Toggling between pages is very quick.
What explains this difference in behavior in these scenarios? More importantly, is there anything I can do to get the SlowPage.pl page to reload quickly all the time once it has been loaded?
OK, I just (re)discovered this bit of documentation:
http://demos.jquerymobile.com/1.4.5/pages/#DOMCache
This explains the behavior I see perfectly. I fixed the problem simply by adding:
data-dom-cache="true" key/value pair to the <div role="page"> div.
Related
I implemented swipe for history back/forward, together with caching the DOM.
Say this is the page structure
Homepage
Page 1
Page 1A
Page 2
When you navigate as follows:
Homepage > Page 1 > Page 1A
The 3 pages are cached
<div data-url="home.aspx">...
<div data-url="page1.aspx">...
<div data-url="page1a.aspx" class="ui-page-active">...
If you then go back twice (to the Homepage) and go to Page2, Page 1 and 1A are still cached :(
<div data-url="home.aspx">...
<div data-url="page1.aspx">...
<div data-url="page1a.aspx">...
<div data-url="page2.aspx" class="ui-page-active">...
If you now swipe back from Page 2, you will get to Page 1A. This will also make the cache huge.
How do you clear Page 1 and 1A out of the cache as soon as you go to Page 2?
So it should be like this:
<div data-url="home.aspx">...
<div data-url="page2.aspx" class="ui-page-active">...
In other words, I want the swipe to work exactly like any browser back/forward button.
(I need the swipe for improved UX because there are no dedicated back/forward buttons on mobile phones)
This seems to solve the problem.
$("body").on("pagecontainerbeforeload", function(event,ui) {
$('div.ui-page-active').nextAll('div[data-role="page"]').remove();
});
So everytime you click a link it will delete all pages after the currently active node.
I would like to have a back button on the page, using data-add-back-btn="true". However I also want a popup on the same page, with a header, that doesn't have a back button on it. It seems that the data-add-back-btn="true" attribute applies to everything on the page.
I've played around with different settings here: http://jsfiddle.net/n9trV/4/ but have had no luck. Can anyone get this working?
Is there any neat way of doing this using the JQM attributes? Otherwise I will probably just delete the button manually after the page has initialised.
I think you should report this as a bug (I feel it is so). However, to solve your problem just using markup, you can delete the
data-add-back-btn="true"
and place inside of your page header, whether it's a <div> or a <header> (better), a link like the following:
Back
If you want to use your previous icon, in the link use this attribute instead:
data-icon="arrow-l"
So you should have something like this:
<div data-role="page" id="page2">
<header data-role="header">
Back
<h1>Page 2</h1>
</header>
<!-- other code goes here -->
</div>
I have a simple jquery mobile application in which every page has the following structure:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div class="content-primary">...</div>
<div class="content-secondary">...</div>
</div>
<div data-role="footer">...</div>
</div>
The content-secondary is a left sidebar, much like the jquery mobile documentation. This secondary content never changes but it can be very large and complex (expensive to reload on every page). I would like to move the same dom element from page to page as it transitions, and not have to include it on every page like the jqm documentation. I only need to load it when it doesn't exist and then move it with every page transition. Any hints on how to do this?
You can insert HTML content in to your page in a pagebeforecreate handler.
In jQuery mobile I am using an iframe. When you press the back button (in the app or the browsers back button) the iframe content goes away. Then when you press the back button again the app transitions to the previous page.
The iFrame is getting added to history. I thought this was never supposed to happen.
A jsFiddle has been created that illustrates the puzzle in as simple a form as possible.
In it you will find a fragment of HTML that creates two jQuery Mobile pages. On the first page there is a link to go to the second page. On the second page,there are two back buttons (one on the header and one as a button on the page) and also a button to reload the <iframe>. To recreate the problem:
From page 1 follow the link to page 2
On page 2, click the button to load the <iframe>
Click either of the back buttons
You will notice that you do not go back to page 1.
Here is the HTML:
<div data-role="page">
<p>This is page 1</p> Go to page 2
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Page 2</h1>
</div>
<p>This is page 2</p>
<p>What follows is the iFrame</p>
<iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
<p>This button issues a programmatic back</p>
<button id="backButton">Go Back</button>
<p>This button loads new content into the iframe</p>
<button id="reloadButton">Reload iFrame</button>
</div>
Here is the JavaScript
$(function () {
$("#backButton").click(function () {
jQuery.mobile.back();
});
$("#reloadButton").click(function() {
$("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
});
});
(This is the code you will find in the jsFiddle).
I'm guessing it is because JQM programatically manipulates the history with replaceState. You can read more about how they track history in an ajax environment in the docs
Show me some code or a fiddle and I may be able to give you a more detailed answer.
One answer that seems to work (so far) is not to attempt to reload the <iframe> via changing its src attribute but instead, inserting a brand new <iframe> element to replace the one that was previously there. The logic to achieve this might look as follows:
$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');
A corresponding jsFiddle showing it working is available.
This has been tested on Chrome 38.0 and Internet Explorer 11.0.
periodically_call_remote is a great rails feature, but with ease comes novices so here I am.
I have a div that is getting updated with content every 5 seconds. Looks great and was easy to setup. This page is the homepage so people will not be staying here long. So when they click another link, such as link_to "All Products", periodically_call_remote creates two displeasing issues.
1) For one thing, periodically_call_remote doesn't stop when a html link is clicked and I believe that this is causing the lag in response to open the selected page.
2) Also, when an html link is clicked the content inside the updated div disappears.
Any conceptual solutions?
This only occurred in FF because I had a div inside the updating div which had my content and that middle div had no purpose.
For example.
<div id="main_div">
<div class="div_with_no_purpose"> <<=== problem div
<div id="div_getting_updated"> <<=== content goes here
</div>
</div>
</div>