Speed up page speed by lazy loading non-essential elements with jQuery

January 26, 2011

I worked up this idea after using some Facebook like buttons and the jScrollPane jQuery plugin. I'm a big fan of jScrollPane, but the iframes from the like buttons caused some unfortunate page flashing after document.ready fired. Rendering the like buttons with FBML took even longer than the iframe method.

You can use this to delay large images, ads, iframes, or other beefy elements that don't appear "above the fold" and are not essential to the initial presentation of your page. This can hurt the "SEO" value of content so be mindful of what you use it on.

This snippet will insert an anchor tag into the selected elements after a 1 second delay and a .5 second delay between each element. Feel free to use and modify as needed.

(function ($) {
	$.fn.addHref = function (options) {

		var defaults = {
			primaryTimeout: 1000,
			individualTimeout: 500

		var options = $.extend(defaults, options);

		//Main Functino
		var jqFunc = function (obj) {
			jObj = $(obj);

			var a = $('<a></a>', {
				href: "http://google.com",
				text: "Google"


		var mainObject = this;

		return setTimeout(function () {
			var currentTimeOut = options.individualTimeout;
			mainObject.each(function () {
				var obj = this;
				currentTimeOut += options.individualTimeout;
				setTimeout(function () { jqFunc(obj) }, currentTimeOut)
		}, options.primaryTimeout);


©2020 Daniel Worthy

Opinions are my own and do not represent the opinions of my employer.