Load sections of a website at specific times - javascript

Hello stack overflow community,
I am struggling to get this website to load quickly. It is a one page portfolio site running off the 'Simply' Theme available at Themeforest:
http://themeforest.net/item/simply-one-page-multipurpose-html-template/7788220?WT.ac=search_item&WT.oss_phrase=simply&WT.oss_rank=5&WT.z_author=AliA
With a video header and all of the other content below the header, we are looking at a 5 second load time.
What I am looking for is a way to load just the video header and navigation at first load, and after the video finishes loading and starts playing, the remaining content will start to load.
I am not all too familiar with Ajax or writing Javascript, but if I could get pointed in the right direction it would be greatly appreciated!
From what I've read so far, possibly the .load javascript might do the trick, but I have not found much information on it or where to start.

.load() includes a callback (see here) - so, assuming your content is all on the same domain, you just need to do something like this:
$(document).ready(function() {
$('#div_where_you_want_to_load_the_video').load(
'/path_to_video',
'#video_container',
function() {
//load the rest
}
);
});
Make sure you have jQuery loaded first.

Related

How to preload all my javascript files before loading my website body?

This question have been already treated on the internet but i dont find a simple answer.
I would like to load only thoses javascript files and css, before starting to run the body my website.
I'm using packery.js, but when my website appears at first, my divs are misplaced. When i reload the page, everything gets back in place.
Is there a way to say : does all css and js files have been donwload? Yes? Ok run the body.
Thank you
There isn't a lot of information you provided which would help us solve the issue directly, however couple of things...
Make sure all your scripts and styles links are places in the head tags. The HTML page gets rendered in browser Top-Down. I.E. It'll load any files from HEAD tags before the body is reached, same thing if you want your scripts to be loaded after the body is loaded.. just put them at the bottom, before the BODY closing tag.
Using JQuery would be the fastest solution if you wanted to perform some functionality after your page has loaded (I know there isn't a JQuery tag, however thought providing a JQuery answer could be advantageous.
$(document).ready(function()
{
//Document Loaded, Put code you want to execute here.
}

Is it possible to direct which elements of a page are painted first by the browser?

I wanted to know if there was any way to control browser painting, for example I'd like to load elements at the top of the page first so users can see content straightaway. The elements at the bottom of the page can load last as the user will not see them until they scroll down.
I'm looking to optimize my site which currently has a 6 second load time and I'd like to get it down to 1 second. This is mostly being caused by JS and images. I know that reducing both these will mean I wont need to worry about directing the painting but out of interest I just wanted to know if it was possible?
Apologies if my understanding of browser painting is very basic
its not that difficult. all you need is ajax. load the inital markup and then load the rest of the page via ajax.
just load the page with little markup which you initally want to show to the user. then as user scrolls down you can make ajax calls and get xml or json or also html files and render them on you page, for example:
$(window).on( "scroll" , function() {
var $document = $(document);
var $window = $(this);
if( $document.scrollTop() >= $document.height() - $window.height() - 400 ) {
//make ajax call here and load the data
}
});
Also read this
After looking into this further I found this article
http://www.feedthebot.com/pagespeed/prioritize-visible-content.html
which provides a good way of directing which parts of the page are rendered first. By separating your content in to above and below the fold content you can decide what needs to be delivered first i.e. your main content rather than sidebar ads. Using inline style to display your above-the-fold content will make it appear very quickly since it won't need to wait for for an external request.
But this is only good for simple CSS, if pages require complex CSS then it's better to use an external file because:
"When you use external CSS files the entire file is cached (remembered) by the browser so it doesn't have to take the same steps over and over when a user goes to another page on your website. When you inline your CSS, this does not occur and the CSS is read and acted upon again when a visitor goes to another page of your website. This does not matter if your CSS is small and simple. If your CSS is large and complex, as they often tend to be, then you may want to consider that the caching of your CSS is a better choice."
http://www.feedthebot.com/pagespeed/inline-small-css.html

One div and its content on website loading last

UPDATE : With help from #TrueBlueAussie,
Yes, since I am not hiding the div, the code below is useless. So ignoring it (The script I used below) , is there a proper solution to my problem.
I have a website, http://frankvinyl.com/
It is a wordpress website. The featured image at the top, it loads after all the website is loaded.
I tried for different solutions for loading the DIV first, but its not working.
$(document).ready(function() {
$("#main1").show();
});
The problem is, the content of #main1 loads after all the website and content is loaded. I just want to load the div with the flow as the rest of the content.
Have been tweaking around but cannot find a appropriate solution.
You are waiting for the document to be ready in your jquery.
Try putting $("#main1").show(); before the document ready.
Don't know if it will work, it has been a long time :p

Load order of js files

I can't seem to get the preloader (Query Loader 2) to load before everything else on the page.
When I refresh the page the images in the full screen slider display block down the page, then the query loader starts.
Is there a way to start the preloader before everything else on the page?
I use stack overflow alot and normally find the answer to my question but with my limited knowledge of javascript this one has got me stumped. Things I've tried:
Putting the call to queryloader2 right at the top of the page in the header.
Putting the call to the slider scripts at the bottom of the page so they load after the preloader.
Changing the z-index of the preloader to higher than the slider.
jQuery.getScript() which loaded the scripts in order but the slider still displayed block down the page and then the preloader started.
I'm thinking its to do with the load order but if you have any ideas as to what I'm doing wrong here your help would be much appreciated.
I've put a link to my site as I didn't know which piece of code to put on here and so you can see the way the preloader and slider load the wrong way round http://stavriaphotography.com
The site is quite heavy on external scripts. Here's how loading resources in browsers work:
Images are loaded asynchronously, this means browser doesn't wait for the image to load before continuing further down the DOM, however
JavaScript is loaded synchronously and you can not load the next one before the previous is loaded.
jQuery $(document).ready() function fires only when the DOM is completly loaded.
Here's what going on, on your site:
You load jQ and queryLoader in the head and prepare to call it when DOM is ready. The scripts in the footer take time to load and are delaying the $(document).ready() function call. In the mean time you have images in your body and since they are loaded asynchronously the browser begins loading them before the queryLoader is ready to execute.
The most simple solution in your case would be to move all the external scripts to your html header, however not a very practical one.
I'd suggest reading up a bit on JavaScript and splitting up you site into multiple files for faster loading.
Some pointers: jQuery.ajax() and Handlebars.js or if you really want to go crazy dive into Backbone.js with RequireJS for asynchronous javascript loading.
Hope this helps!
Put Jquery Library first
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
then add your other JS files

Load a page from within an already loaded page

It seems like this should be a pretty obvious answer but I'm under pressure for portfolio and I think I may be confusing myself here. I couldn't quite find the answer that I was looking for (which I usually am able to on this site).
Basically I want to load an external page with an image into my gallery. The only catch is that the gallery itself is loaded from an external page.
I was able to successfully implement this when I put the gallery code into its own individually loading window. But when I try it with the original setup, of course, I have to delegate. I know how to set that up, it's just defining the function itself that's giving me problems (where "window" calls the div that contains the gallery on its external page):
function showPiece(show) {
window.load(show);
}
How do I "delegate" here?
Also, I wanted to make sure I figured out how to click back to the gallery as well. That wasn't working for me either for some reason. Here's what I was using (you can see on the guitar page on the portfolio2.html page):
window.on('click',"#back", function(e){
e.preventDefault();
showPage('portfolio.html');
manageNavState($(this));
});
Here's my site so you can see in detail what's going on:
Portfolio Site
And here's the other gallery page I made:
Second Gallery Page
Sorry if this is a dumb question. Thanks in advance everyone!
===EDIT===
Nevermind, my code was perfectly fine. I found out I just had to open and close with html tags in the linked image pages, which I didn't expect because I didn't have to do it elsewhere. One image is still not working, but I'll figure it out.

Categories