JavaScript - prerender another page - javascript

I'm trying to make a simple gallery page. The website will always reload after pressing "Next" and I want to make some prerender for the next slide (for better performance and faster load).
At the moment I'm using prefetch/prerender options from HTML5, for Chrome and FireFox:
<!DOCTYPE html>
<html>
<head>
<link rel="prefetch" href="index2.html">
<link rel="prerender" href="index2.html">
</head>
<body>
<img src="big_big_buck_bunny.jpg"/>
Next
</body>
</html>
Is there any other way to cache/prerender next page (in this example - index2.html) ? For example using JavaScript? I'm asking about it because I want to make the prerender work also on Opera 12 and IE (8/9).

Maybe use AJAX. In jquery exists .load() method (http://api.jquery.com/load/)
$('#next').click(function () {
$('#container').load('http://fiddle.jshell.net/webdevem/JfcJp/show/');
});
$('#prev').click(function () {
$('#container').load('http://fiddle.jshell.net/webdevem/JfcJp/show/ #specialContent');
});
Here You have example jsfiddle

If your going to navigate to a new page there's no way to precache html. That's what Ajax is for.
You can Ajax in the html, set the document body to the new html. But if the use reloads the page it will be at the wrong place unless you set a #! In the URL. There's not a lot of nice options with IE8.

Cant you see just preload the images, The page itself isnt gona take any time to build...is it?

Related

Chrome: How to detect history navigation (back button having been pressed)

I know, this question looks quite the same as those asked and reasked regularly, as for example here:
How to force reloading a page when using browser back button?
I need to know if the user has...
. navigated to current page, or reloaded current page (in both cases the page has been normally loaded, I need no further specific action)
. or has arrived on current page using history back or forward button (in these cases, the page is not loaded, just anyhow taken out of browser-cache, and I need to take further actions -the simplest being just reloading the page, window.location.reload(); or equivalent).
I tried the solutions exposed here: https://stackoverflow.com/a/43043658/3872061 and here: https://stackoverflow.com/a/56851042/3872061 as well as in several other places, within Stackoverflow or not.
It works well for Firefox (105.0.1), for Edge (105.0.1343.50), but I can't get it to work with Chrome (105.0.5195.127).
Here the simplest test I could imagine.
page1.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on("pageshow", function(e){
$("#type").text(window.performance.getEntriesByType("navigation")[0].type);
let historyTraversal = event.persisted
|| ( typeof window.performance != "undefined" && window.performance.getEntriesByType("navigation")[0].type === "back_forward" );
if ( historyTraversal ) { // Handle page restore.
$("#backOrNot").text('User just came back using the history "back" button');
//window.location.reload(); // this is actually the targetted action: reload page
}
else {
$("#backOrNot").text('User loaded the page');
}
});
</script>
</head>
<body>
<p id="backOrNot"></p>
<p>( window.performance.getEntriesByType("navigation")[0].type = <span id="type"></span> )</p>
<p>Just a link from where you can click the history back button</p>
</body>
</html>
page2.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>
From here, try to:<br>
1. Navigate to page1.html<br>
2. Go back to page1.html using the history back-button
</p>
</body>
</html>
With both FF and Edge, when you come back to page1 using the history, the "back_forward" information is available.
With Chrome, you just get the status ("navigate" or "reload") which the page had on the initial load,as if you had never navigated away then returned using the back button.
What have I missed? What am I doing wrong here?
Your page will automatically reload, if you send off page headers to not allow caching of that itemsList.php page. My test code -- see answer here -- should help you understand the concept. I am still trying to find a better way to solve that problem differently. In my case, I am firing off a "page-is-now-loading-spinner" that is not resetting itself to hidden, if the back button (go back one page) is presses.

Page reload by javascript

I have a page which contains multiple tabs. I want to reload the page but it should stay on the same page.
I tried reloading by using
window.location.reload()
But its redirecting to the 1st page which i dont want.
Please suggest me other ways of reloading by using js.
if you can use query parameters in url, then it will work without localstorage, sessionstorage, cache or cookies.
Eg: www.something.com?reloaded=true&tab_num=2
In all tabs we have some fields textfield, dropdown etc. The user has entered some value for those fields. So i want whenever the user nevigates to other tab it should reset the fields.
I would try to go this way.
Most of all, on each tab you have initialization method that set some initial values into your controls. So, you need to:
1. Subscribe on event when tab is changed. Realization of this depends on your plugin.
2. On tab change - re initialize tab and set your values empty again.
This approach will
1. Update only one tab instead of all (this will be faster)
2. Give you control under initialization of each tab.
3. Make a point where you can easily add some additional logic when new requirements come.
Hope this helps.
See attached code snippet. To do a reload you can call it through javascript. I attached the javascript function to a HTML button to demonstrate the function.
This solution should work, since you have already pressed the tab.
If you do not want it triggered by the HTML button you can anyhow use the function and let it run from javascript.
function pageReload() {
location.reload();
}
#button {
width: 100px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<button id="button" type="button" name="button" onclick="pageReload()">Reload</button>
<script src="index.js"></script>
</body>
</html>

Changing the content of meta refresh does not change refreshing time

I have a meta http-equiv="refresh" inside the <head>.
<head>
<meta name="mymeta" http-equiv="refresh" content="2" id="myMeta">
</head>
Using Javascript, I'm trying to change the content attribute of this meta tag.
var myMeta = document.getElementById("myMeta");
myMeta.content="10";
When I display the content via document.write(myMeta.content);, I get the changed value which is 10, however, the meta tag will keep refreshing each 2 seconds.
I have tested this both in Firefox and Opera.
FULL PAGE
<!DOCTYPE html>
<html>
<head>
<meta name="mymeta" http-equiv="refresh" content="2" id="myMeta">
<script>
var myMeta=document.getElementById("myMeta");
myMeta.content="10";
document.write(myMeta.content);
</script>
</head>
<body>
</body>
</html>
This happens because the browser immediately process the <meta> tag when it is present onload.
See DEMO.
When the document is being loaded, the browser sees and processes the following:
<meta name="mymeta" http-equiv="refresh" content="2" id="myMeta"/>
Even though you try to change its content from 2 to 10, that 2 second refresh is already acknowledged and the browser waits for 2 seconds before it refreshes the page. The 10-second refresh that is injected by JavaScript actually works*, although the page has been refreshed by the time it reaches 2 seconds and nothing seems to happen. This process is then repeated again and again.
Try the opposite and see what happens.
*This only works on Safari and Chrome. Firefox and Opera does not support the modification of meta refresh through JavaScript.
The getElementsByTagName method returns a NodeList so you need to specify an index to correctly access the element:
var myMeta = document.getElementsByTagName("meta")[0];
As someone mentioned this will probably still not work as the meta tag will need to be re-appended to have the desired effect.
Since you're using JavaScript you can just use setTimeout to achieve the same behavior
setTimeout(function() {
location.reload();
},2000); // reload page after 2 seconds

Make back button go to a different page

I'd like to JavaScript, or JQuery (or any plug in actually) to force the browser to load a specific page when the back button is clicked.
Basically insert a page into the browser's history.
I've found a way of doing it below, but it seems long winded. Am I missing something?
<html>
<head>
<title>Back button test</title>
</head>
<body>
<script type="text/javascript">
window.history.pushState('other.html', 'Other Page', 'other.html');
window.history.pushState('initial.html', 'Initial Page', 'initial.html');
</script>
Initial page <br />
<script type="text/javascript">
window.addEventListener("popstate", function(e) {
if(document.URL.indexOf("other.html") >= 0){
document.location.href = document.location;
}
});
</script>
</body>
</html>
In general, you can't modify the history of a browser, this is a major security feature. If you've found a way around it, that might work well for you, but keep in mind it might upset people. I know if I was on a site that hijacked the back button, I wouldn't be back. Instead, use better UX to give the user links.

Progress image while page is loaded

Before I continue:
I am aware this has been done before.
I searched SO for this before deciding to post this...
Said that, I noticed that in some browsers that have settings to clear cache on every visit to a page, certain parts of my page show with delay. I would like to have a function that will display some animated image until the page is finished loading 100%.
I would like to place it in my header include file once and have it kick in every time a page loads. I think I need it to be implemented in AJAX. I would like this function to be a stand-alone, i.e. not tied to any other functions. Shall I use jQuery? Since jQuery itself requires loading an external file, should I implement it as a simple JS function?
Any feedback would be highly appreciated. Examples would be priceless.
:)
EDIT:
I found a plug-in that does exactly what I need.
With jquery you can do something like this
html
<div id="loader"></div>
$(window).load(function () {
$("#loader").fadeOut();
});
You can incldue a div with a loader (have it fixed, or absolute, whatever you like) and then with $(window).load( callback ); you can detect when the whole page has finished loading so you can hide the loader.
Or with pure JS you can do the same,
window.onload = function() {
document.getElementById('loader').style.display='none';
}
You can use the onLoad attribute for . Do something similar to:
<body onLoad='showLoadingDiv()'>
and make the showLoadingDiv function show a full-page white div with a loading sign.
Another (probably preferred) option is to have a
<div style='background:white; width:100%; height:100%'>LOADING</div>
and hide it as soon as the page completely loads, i.e. under jQuery's $(function() { });
This page includes some AJAX progress images to use.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
//window.onload will wait for images
window.onload = function() {
//find element with id='progress' and hide it
$('progress').hide();
}
</script>
</head>
<body>
<img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;">
<h1="">This is a solar eclipse</h1>
<img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;">
<p>Pretty and large enough to have to wait for</p>
</body>
</html>
I hope this helps

Categories