Menu
I'm working with jQuery to have a fade-in effect on my html page, which works just fine. However, when I hit the back-button in my browser, I go to the right url but get a blank page. Is this a browser-caching thing? I'm relatively new to jQuery and I'm not really sure how to solve this. This is the site: http://www.e-preview.be/huyzewaterloos/nl/index.html
The code I'm using is this:
//page transition
$("body").css("display", "none");
$("body").fadeIn(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
909
It's because you page is in "bfcache" (see a Firefox article). For disable bfcache, you can just add an onunload attribut:
<body onunload="">
Source : Ajax, back button and DOM updates and Is there a cross-browser onload event when clicking the back button?
147
Newer browsers are better about keeping the previous pages ready to display when you use the back and forward buttons. So what is likely happening is that your browser is merely re-displaying the page after the $("body").fadeOut(500, redirectPage); had finished executing. That is, the page being shown after you click the back button has the style body { display: none; } applied.
I had no problems navigating your page with Chrome "6.0.472.51 beta" using the back and forward buttons. When I used Firefox 3.5 I saw the described issue when using the back button to go back to the index page. Using Firebug, I was able to confirm that the body element's style was set to display: none.
So what you are seeing is FireFox's bfcache keeping the page in the previous state, JavaScript and all. If you want Firefox to re-fire your fade in code you can attach it to Firefox's pageshow event. Similarly, WebKit has its own page caching mechanism (which would affect Safari and Chrome).
It should also be noted that the jQuery .ready() function is not the same thing as the window.load() function. See the documentation for further details. The source code for the .ready() function is also quite helpful.
To summarize: The code executed by $.ready() is executed before the page is actually rendered. In newer browsers, when you navigate away from a page it is very likely that the browser will save that page's state exactly as it is when you leave it. Thus, when you use the browser's back button to return to the page, the page will not be re-rendered. That is the DOM will not be rebuilt and the $.ready() function will not be re-fired. If you have code that need to be run every time the page is shown then attach the code to the pageshow() method (if it exists).
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
