Develop Reference

Loading the full site and then displaying, allowing video content to fully download

I have been having a issue with my html5 videos not loading fully and therefore freezing/stuttering at times, I need to give them time to load and want to put together something that will stop the page from displaying until the page and content is fully loaded therefore allowing my videos enough time to download properly.
What is the best/simplest way to achieve this?
Someone suggested not starting automatic playback before the readyState reaches HAVE_ENOUGH_DATA (4) but not sure how to implement this.
I basically want to put a div around the site and not load that div until the site is fully ready to be seen...
Any help would be greatly appreciated! Thanks

I think you need this library to go with: http://thinkpixellab.com/pxloader/.
The site has samples and API documentation to start with.

Lazy load or image loading sequence questions

I have a task given by our project manager.
Basically he wants to load image sequentially. When the page first load, he wants certain sequence on the load process.
Although I already explained on how the browser works and created javascript that display certain sequence display, it doesn't seem to fit the requirements.
What he wants is if it's possible to use "lazy load method" when the page first started.
I know lazy load image is used if we have a long page(scrolling) and many pictures. User might not see all the pictures below, so it kinda wasting bandwith if everything load at once during web loading.
Thus, we use lazy load image, that images will be loaded when user scroll the page.
The question is if it's possible to apply this method at the first start of the page. So we can directly select the sequence and have the lazy load working even on the first display of the page without scrolling.
Lazy load that I used is = http://www.appelsiini.net/projects/lazyload
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
Thank you very much for your help

Yep just include the lazy load initialization in a ready function
$(document).ready(function(){
$("img.className").lazyload({
container: $("#DivId"),
});
});

Javascript Charts don't load until FWD then BACK

I have a problem with the javascript amcharts, but the situation is likely to stem from a more generic javascript issue. Unfortunately it's being behind a development door; so no direct links. But, if I can paint the picture:-
1) Main index page uses jQuery.load() function to load a page of analytics and information.
2) Once loaded; jQuery.getScript() is used to fetch graph data.
3) Nothing appears
The same code works when together in one single static html page (i'm using example data just to get it running right now). It doesn't even work when I put it all in the .load()'d file together.
I've taken it further up the loading tree, so it's all in the main index page, no loading() bits. Still nothing.
However, if I go forward on the browser, then back. The graph is there... ready to go. Any ideas what might be leading to this behaviour?
Any thoughts, directions of investigation very, very welcome.

I've overcome this by using an iframe to load the graphs, not idea but workable solution.

How to display images only after html is properly rendered?

I am fetching all my friend's profile images and making a widget which will display images one by one on next button clicks. When I make a request to facebook server, in response while html is rendering I can see all images getting displayed on browser and once loading is done everything fits perfectly in widget. How can I avoid these image pictures getting displayed while my page is still loading.
I have heard something about lazyloading which will load images only when page is scolled down. I don't have any scroll down option nor have any idea how to use ladyload but is there anything similar which would be helpful to me?

You could use css to hide all the images in the widget:
#widget img {display:none;}
Then use jquery to show them when the DOM is read yand all images have been loaded:
$(document).ready(function() {
$('#widget img').show()
});
Something like this would work.

If you need to develop only to supported browsers [check it here] https://caniuse.com/#feat=loading-lazy-attr
you better use built-in image lazy loading like this:
<img src="https://picsum.photos/id/300.jpg" loading="lazy" />

There's various options for lazy loading images, so long as you use JavaScript.
There's quite a few libraries to help you, such as jquery's lazy load plugin: http://www.appelsiini.net/projects/lazyload
Or various alternatives you'll find via our old friend Google :)

Use the jquery Lazy Load library. Here is a nice introduction: http://deanhume.com/Home/BlogPost/lazy-loading-images-with-jquery/22

You can use jQuery.
jQuery is "A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX."
Jquery scripts are usually started with this commands
$(document).ready(function() {
// put all your jQuery goodness in here.
});
so the commands will only be executed after the page is completely rendered.
Here you can find some jQuery Tutorials

Jquery / Javascript — How to optimise my site load visually?

I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site:
http://marckremers.com/2011 (Still not complete, in alpha phase)
As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).
I'm wondering if there is a way i can make it click into place first and then load the elements?
I tried putting the reposition script just after , not even that works.
Any ideas? Thanks

With all of the images you have, your page is 1.5mb, coupled with 70 http requests. No wonder your site behaves the way it does.
You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.
If you want to go further into optimization I would also:
Use one external javascript file. Yes
it increases size, but I favor that
over http requests.
Minify your html/javascript/css.
Don't host jQuery on your site, use a CDN such as Google APIS.
Check out a service similiar to Amazon S3.
I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.

You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your if ... else that handles how many columns to display and your Google Maps iframe.
To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the projects and tb_tweets classes, so it doesn't have to wait for all your JavaScript to load before handling resizing of your projects and tb_tweets.

use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.

A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?

Generally you only want to trigger your events after the page has rendered, i.e., using
$(document).ready(function()) {
//your javascript goes here
}
Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.