CODEWITHSUNDEEP
jquerylazy-loading
photocurio
photocurio

Reputation: 156

Lazy-load my whole site?

I'm wondering if this is possible: I want my whole site to delay until it is ready, then do a fadeIn. I'm not using continuous scrolling or anything like that. I just want my pages to display in a smoother, all-at-once style.

If I add a class="lazy" to the body tag, and then a jQuery script like this, I'd expect the site to fade in smoothly. But it does not work. $('.lazy').fadeIn('fast');

Upvotes: 2

Views: 1476

Answers (3)

alastairtree
alastairtree

Reputation: 4289

You could use JavaScript to hide the page as soon as it is executed, and then show it again when the page is ready (onLoad) as suggested by php_nub_qq. You might vary this and wait till some other thing is ready like images are downloaded. However if you had a slow/mobile browser it might happen that the page appears in the browser, then the javascript executes and hides and then shows the page leading to nasty flickering.

You could use Javascript and css in combination as suggested by Josh Beam but if the user has javascript disabled they will never see anything because the "fadeIn" never fires.

However you might be better to consider why is it you need to display the page all at once? Perhaps one of your page resources/plugins is slow and you should fix that. Perhaps you should change to a single page app style of front end if a really specific type of user experience is required with very high performance needs.

Fundamentally you are trying to do something that is probably be best left to the browser, and it may have unintended side affects in terms of SEO, user experience and cross browser compatibility that should be considered before you apply any of the above.

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19802

Another option is this (here's the jsfiddle):

CSS:

body {
    display: none;
}

JS:

$(function() {
    $('body').fadeIn(500);
});

Upvotes: 1

php_nub_qq
php_nub_qq

Reputation: 16065

I assume you have a 'main' js file that is being loaded in all pages, then you can do

$('body').fadeOut(0);
$(document).ready(function(){
    $('body').fadeIn('fast');
});

Upvotes: 1

Related Questions