0

I am trying to load different pages with refresh using jquery with the help of window.history.pushState('','',url);

function goto(event,el)
{
    url=el.href;
    event.preventDefault();
    window.history.pushState('','',url);
    //$('html').load(url);
    $.get(url, function(data) {
        var head=data.match(/<head[^>]*>[\s\S]*<\/head>/gi);
        $('head').html(head[0]);
        //$('#content').html($(data).find('#content').html());
        var body=data.match(/<body[^>]*>[\s\S]*<\/body>/gi)
        $('body').html(body[0]);
    }); 
}

HTML is loading before CSS and there will be around 1-2 second of naked html display then css is loading completely

All my pages are different so i have to load different css, script everytime.

Is there any way to load the css quicker than the html or is there ant better way to load whole page or replace the current page content with new page.

I really don't want to use any plugin

donm
  • 67
  • 10
  • 1
    What's the point of using pushState and a custom .get() request if you're just going to change the entire page anyway? This sort of looks like a case where a traditional multiple HTML pages website sharing some script or css files will be preferred, since you replace the entire head and body anyway. – Shilly Jul 29 '19 at 11:48
  • @Shilly is there any better way to load new page without page refresh – donm Jul 29 '19 at 11:50
  • If you have already loaded the page, CSS should be instant, as it's going to be in the cache. In most browsers loading the same page in most cases dons't even get a flash of un-styled content, or even a flash of no page. One thing I would check, what expiry header your server is sending. Also changing page can be as simple as -. `location.href = url`. – Keith Jul 29 '19 at 11:55
  • Not without a page refresh, but that's exactly what you're mimicing, a full replacement of everything on your page, JS, CSS and HTML., which is basically the same thing as a page refresh. The browser cannot preload any CSS or scripts before the `.html()` function actually updates the DOM. Hence this implementation can be slower than an actual page loading. So I would suggest to try to share some CSS and JS between the pages, so you don't have to replace the entire `` and `` every time and those files can stay cached for 'instant' loading. – Shilly Jul 29 '19 at 11:59
  • @Keith can location.href=url loads the page without page refresh if using instead of $.get kindly reply – donm Jul 29 '19 at 12:00
  • 1
    *"All my pages are different so i have to load different css, script everytime"* - this is a common misconception and anti-pattern. Modern browsers (especially chrome) cache the *interpreted* code, so don't even need to re-parse your javascript if it's the same. If you load different files per page, you're actually slowing down the load. – freedomn-m Jul 29 '19 at 12:03
  • @Shilly right now i am sharing only header, header css and jquery in every page – donm Jul 29 '19 at 12:03
  • @donm It could be made too, but I'm not 100% sure what your trying to achieve, as like pointed out if every page is totally different using aJax loading doesn't gain you anything. I use SPA pages with Ajax loading, but all the Javascript / CSS etc is generally shared, or at least loaded on demand as new routes are requested. I'm assuming this is what your after? – Keith Jul 29 '19 at 12:09
  • 1
    Our point is, if you want to do navigation with `.get()` requests, you want to try to change as little every time you change something to the page. Then you can, for example, keep one CSS file and one JS file ( which can be several different files concatenated together ) instead of having to load new ones every time. By replacing the and completely on every link, you kind of throw away any advantage you gained over a basic website without ajax-based navigation. – Shilly Jul 29 '19 at 12:12
  • @Shilly yeah i got your point i am also thinking to join multiple css files into one. What if i load other css except header and jquery.js how to do this kindly reply using the above code in the question – donm Jul 29 '19 at 12:23

1 Answers1

0

The simple solution is try using Spinner or loader on page load, which prevents you naked HTML form Users here is link How to show Page Loading div until the page has finished loading

Awais
  • 4,752
  • 4
  • 17
  • 40