Dynamic Javascript Loading on Scroll

If you have a lot of widgets on your webpage page, you can try out many tools in order to speed up page loading, however there is a limit to optimization. It is often tried to put heavy javascripts at the end of page loading, putting them before <head> or using the window.onload function. In this post, I show an alternative that has the advantage of shorter initial page loading and a smoother user experience than these methods.

I had the idea when I was researching social toolbars. Often the social toolbar would appear only when the page was scrolled. Therefore page scrolling should be detected and if the page was scrolled down the toolbar would fade in.

I thought that the same code could be applied for dynamic javascript loading. Many libraries are not needed initially. Some widgets are only visible once the page is scrolled. I implemented some code myself for scroll event detection, however in the end, I use the ajax library for this purpose.

Here comes the general pattern:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script id='aptureScript' type='text/javascript'>
function jsload(src){
var a=document.createElement("script");
var dynloaded=false;
$(function() {
$(window).bind("scroll", function(event) {
if($(window).scrollTop() > 50){
// ...
// javascript loading here, ex. jsload('script.js')

The number, marked in red is the scrolled distance from the top of the page, at which the loading of additional javascript code will occur.

Please note that if you want to use this in your blogger template, make sure to escape html tags within the javascript code.

Enjoy. Please leave a comment below for questions and suggestions.

7 Responses to "Dynamic Javascript Loading on Scroll"

No. This is not an install thing this time. I tagged the post with "programming" to make that clearer. It requires at least very basic skills in javascript to make this work.

This example code can be useful if you have any script that takes a long to load (you can see that sometimes in the browser status bar or when you use an analysis tool). For example I found that the google followers widget took around 10 seconds to load. I reduced the time a lot by manually changing the number of rows from 4 to 2, so only half the images get loaded, however it is still slow (and sometimes even unresponsive). I found the code for the google follower widget, took out the parts within the <script> tags and put them in the middle part of the code (where it says loading here).

Using a trick like this can reduce initial loading time a lot, but as I said, you should know a at least a little bit about javascript.

Very useful post. This type of post should be spread so that others will know.

Great article, could you please visit my blog on www.scasha.com


Dopo le droghe
come Viagra e Cialis ha rivoluzionato il trattamento di disfunzione sessuale
maschio verso la fine degli anni 90, un turbine di neve dei test clinici sono
stati condotti in donne nelle speranze che le droghe potrebbero fare lo
stessi per fare rivivere l'azionamento di sesso diminuente della donna.



Dynamic Javascript Loading on Scroll



I totally agree with your post thanks for sharing,

Will it work well for blogger ? 

  Subscribe to replies to this post

This conversation is missing your voice. Your feedback is appreciated.
Post a Comment

You can use some HTML tags, such as <b>, <i>, <a>

If you see a message that says "your request could not be processed" press preview first and then post.
You can follow the discussion of this post by subscribing.

You are free to include information from this article on your own site if you provide a backlink. You can use the following markup:
<a href="http://www.myoutsourcedbrain.com/2011/01/dynamic-javascript-loading-on-scroll.html">Dynamic Javascript Loading on Scroll</a>