3

I don't know javascript and I have tried to find an answer on this before posting.

$(function(){
    $('body').fadeIn(1000);
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            location.reload(true);
        });
    }, 5000); // 5 seconds for demo
});

See the code in work here: http://jsfiddle.net/7duedzkb/5/

This code reloads a page every 5 seconds. I'd want to modify it to reload a page only once, basically it will reload the page after 5 secs and then stops the reload loop. I need this on a aggregator type of site where at first page opening the feeds are loaded from cache for speed issues.

Can you help? Much appreciated. Thank you

Improve this question
3
  • 1
    use localstorage to know if the page has been reloaded once Commented Feb 29, 2016 at 10:49
  • The best way would be to do it server-side. Load this script only if you serve the page from cache. Commented Feb 29, 2016 at 10:51
  • Adam can you show an example? Commented Feb 29, 2016 at 11:05

5 Answers 5

Reset to default
4

You must reload only if a certain condition is true. For example, you can save in sessionStorage a flag and read if exists don't reload.

var store = window.sessionStorage;
$(function(){
    $('body').fadeIn(1000);
    if(!store.getItem("reloaded")) {
       setTimeout(function(){
           $('body').fadeOut(2000, function(){
               store.setItem("reloaded", "true");
               location.reload(true);
           });
       }, 5000); // 5 seconds for demo
    }
});

It's better session storage instead of localstorage, because the next time user comes to the page the flag will be setted.

EDIT

Solution storing the URL of the page (assuming the URLs are unique):

var store = window.sessionStorage;
var page = window.location.href;
$(function(){
    $('body').fadeIn(1000);
    if(!store.getItem("reloaded-"+page)) {
       setTimeout(function(){
           $('body').fadeOut(2000, function(){
               store.setItem("reloaded-"+page, "true");
               location.reload(true);
           });
       }, 5000); // 5 seconds for demo
    }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

18 Comments

Thanks this works. If a user moves to another page will the script refresh again after 5s?
If the user end the session (close browser for example), the reload will produce again first time the user comes to page.
is it not possible to tweak the code so that the script refreshes after 5s on every page load without closing the browser? (for ex. if a visitor moves to another page, the feeds on that page will be loaded again from cache and this refresh would be needed) Thanks
If you identify all pages with an unique id, the functionality is simple. If not, you will waste a lot of time. This is a common problem: don't recopile all needed functionalities before start to develop the application.
Please, check this answer as correct answer since this solves the problem you are asking for. For a new question please, or ask a new question or edit this topic.
|
1

set the flag in a cookie and check it everytime before doing a reload

$(function(){
    $('body').fadeIn(1000);
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            if ( getCookie("reload") != "true" )
            {
               setCookie("reload", "true"); 
               location.reload(true);
            }
        });
    }, 5000); // 5 seconds for demo
});

    function setCookie(key, value) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }
Improve this answer

3 Comments

Thanks! I haven't seen your answer until now for some reason. Is there a way to make this script run only on certain pages?
Can you help with my question?
@merxie sure. You can check for the current page url before executing the script.
1

Use localStorage for this purpose,

$(function(){
    $('body').fadeIn(1000);
    if(localStorage.getItem("reloaded") !== "true") {
    //Check the flag in localStorage before begin the reload.
      setTimeout(function(){
        $('body').fadeOut(2000, function(){
            localStorage.setItem("reloaded","true");
            //set a flag during the first reload in localStorage
            location.reload(true);
        });
      }, 5000); // 5 seconds for demo
    }
});

DEMO

Or Use SessionStorage as pointed in the below comments, based on your req :-

var storage = window.sessionStorage;
$(function(){
    $('body').fadeIn(1000);
    if(!storage.getItem("reloaded")) {
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            location.reload(true);
            storage.setItem("reloaded", "true");
        });
    }, 5000); // 5 seconds for demo
    }
});
Improve this answer

3 Comments

sessionStorage is more propper.
@MarcosPérezGude Then the page will be reloaded again if user reopens the browser.
Yes, OP said: I need this on a aggregator type of site where at first page opening the feeds are loaded from cache for speed issues. That's a good reason to use session not local
0 
$(function(){
    $('body').fadeIn(1000);
    if (localStorage.reloaded !== 'true') {
        setTimeout(function(){
            $('body').fadeOut(2000, function(){
                localStorage.reloaded = 'true';
                location.reload(true);
            });
        }, 5000); // 5 seconds for demo
    }
});
Improve this answer

1 Comment

sessionStorage is more propper.
0

Use SessionStorageto achieve the result, please see the below sample:-

var storage = window.sessionStorage;
$(function(){
    $('body').fadeIn(1000);
    if(!storage.getItem("reloaded")) {
    setTimeout(function(){
        $('body').fadeOut(2000, function(){
            location.reload(true);
            storage.setItem("reloaded", "true");
        });
    }, 5000); // 5 seconds for demo
    }
});

Sample

Improve this answer

7 Comments

sessionStorage is more propper.
@MarcosPérezGude localStorage is the same as sessionStorage with the same same-origin rules applied but it is persistent. From the docs.
@Jai Yes, OP said: I need this on a aggregator type of site where at first page opening the feeds are loaded from cache for speed issues. That's a good reason to use session not local
@MarcosPérezGude if such case then what is the use of location.reload() then.
Maybe it's a weird trick to reload and check the new server values that can be setted in background while the page doesn't reloads. The system that he uses I don't know, and I don't think is the best way or not, but for the exact question, the correct answer should be with session storage. You are free to have a different opinion.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.