Adding Image after page load - javascript

So I read this, what seems to be a very good article on the topic title:
http://www.rodsdot.com/javascript/Remote-Scripting-Images-(No-Need-For-AJAX).asp
What I don't understand is why it works?
I am fine with my work (monkey see, monkey do)but I figured why not ask.
Thanks,
Mat

Instead of loading all the images, css, scripts, etc.. on page load. This lets you load some images after the page load, letting the crucial part loads first.
It decrease the Page Load time, because it continue to load in the background after the Page Load was completed.

Related

jquery first time page loading issue

When I first time load my website then images are jumping on each other
but when I refresh them it will look normal as I need it .
To see first time output of mixed images jumping on each other use
ctrl+shift+r
Jquery is creating problem when I load the website first time?
Any help would be appriciated.
This is not a jQuery issue. This is a network download issue. By hard refreshing (ctrl+shift+r), you are forcing the browser to re-download CSS assets, which increases the amount of time before it can properly style the page.
There is a front end design tactic that might suit you well in this scenario.
You have two sections that are "above-the-fold" when you first load the page. Instead of downloading an external stylesheet before rendering and painting these two sections, you can extract the "critical" CSS to a block in your HTML.
This ensures your CSS is there without wasting time with another HTTP request. For more information on what critical CSS is, I'd recommend this article: https://www.smashingmagazine.com/2015/08/understanding-critical-css/#what-is-critical-css

JS loads images after page load and calculates space wrongly

I have a website (flamencosrosas.com), run with WP and the Gridly template. I've noticed the images will overlap on the very first page load. If I refresh the page it won't happen again. My colleague told me this happens because images are being loaded after the page loads, which is why the JS code is calculating the image height wrongly and why they overlap.
I know nothing about JS and am unable to solve this issue. Could someone possibly help, please?
Many thanks! :)

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 at bottom/top of web page?

I was just using the plugin "Yslow" for Mozilla Firefox, and it told me that I should put JavaScript at the bottom. I have heard this before but haven't really thought about it too much. Is there really an advantage in putting JavaScript at the bottom of a web page compared to the top?
It'll allow the web page to load visibly before executing JavaScript, which makes sense for things like Google Analytics, which don't need to happen before the page loads.
You may also want to look into things like jQuery, prototype, etc and attach to the "ready" handler, which executes JavaScript code after the DOM has been fully loaded, which is an appropriate place for much JavaScript code.
Assuming you aren't running on a CDN or aren't serving your JS from a separate sub-domain or server, it will load synchronously and force your HTML content to wait until it has downloaded the files. By placing the JS at the bottom of your page before the closing </body> tag, you are allowing the HTML to be parsed prior to loading the javascript. This gives the effect of faster page load times.
If you have static html content and a lot of javascript, it can make a difference in perceived page load time since the html will load first giving the user something to look at. If you don't have much javascript, or the existing page content relies on the javascript to be useful, then this is not as useful practically-speaking.
I want to bring update to this topic, google has recently introduced async snipped http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1 which can be added for your site to bring e.g. google statistics support. It should be placed bottom of the <head> section for best performance. The point is that this increases likely hood of tracking beacon to be sent before user leaves the page.
Also it should be located there if you want to verify your site in google webmaster tools using your google analytics.
Other than that, same rules still applies basically - javascript at bottom for "fast" loading of the page. I used quotes because I dont count page fully loaded until javascript finishes ;-)
Yes, the page will load the content and render it before loading and executing javascript, and the page will, as a result, load faster.
TOP
When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading.
BOTTOM
On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if, for example, your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.
Taken from Demian Labs.
It allows all the DOM elements to fully load before loading the Javascript which addresses them. This standard is also part of Visual Studio.
Placing scripts at the bottom of the element improves the display speed, because script compilation slows down the display.
Yes including the javascript at the bottom of the page really quickens the loading of the page. Since browser executes things synchronously it impacts the page loading if it is placed at the top of the page. If it is placed at the bottom of the page, the page would have loaded the entire markup by then when the browser starts loading the javascript giving a better experience to the user.
It's advisable to put all inline scripts at the end to improve performance, you don't want your users to be staring at a blank white screen while the script renders. You can use defer attribute eg. to prevent link scripts from delaying your html rendering.

Categories

Resources