Articles

Navigation ( archives ›› 2010 ›› June ›› 10 ›› How to preload an IFrame )

How to preload an IFrame

Posted on June 10, 2010, 12:54 pm EST

One of the annoyances of an IFrame is that if the frame takes time to load, you will see white space for a short moment then the page will appear. The reason why I did this is for Google Docs. I had a presentation I want to embed on my website, and it was taking time. I would like to share what I have done, although simple, but yet powerful, and hope it will help you. In this post, I will explain to you how to make a simple textual preloader for your iframe

Why do we need a preloader?

Sure some websites are efficient at loading, but the download time might vary. If you are adding widgets as I explained earlier, you will see that it is quite annoying having this white space in the middle and just reappear. It degrades user experience and just does not feel right. By adding a very simple preloader to that iframe, the user will know something is going to happen in that area.

Small demo

Refresh this page and look at this area to see how it works.

The idea

It is pretty simple and straight forward! We create some sort of placeholder that contains our textual loader, in this case it will be just a div with some loading text.

At the end of the webpage, right before the body tag, we inject some Javascript to hide the frame and show the preloader. With a simple window load listener, we can know when the page has been fully loaded.

Once the page loads, we can hide the preloader and show the iframe. Voila, a simple preloader!

The code

On your main page, right before the end body tag you insert the following:

CODE:
  <script>
    var preloader = new IFramePreloader('testFrame');
    preloader.init();
  </script>

The iframepreloader.js is below:

CODE:
/**
* Global Static Event Utilities helper that assists us to add
* cross platform events to any DOM object as well retrieving
* their target if any exists.
*
* @author Mohamed Mansour (http://mohamedmansour.com)
*/
var event_utils = {
  add: function(obj, type, callback) {
    if (obj.addEventListener)
      obj.addEventListener(type, callback, false);
    else if (obj.attachEvent)
      obj.attachEvent("on" + type, callback);
  }
}


/**
* Preloads an IFrame since it may take time to load.
*
* @param {string} id The identifier for the Iframe you want preloaded.
* @author Mohamed Mansour (http://mohamedmansour.com)
*/
IFramePreloader = function(id)
{
  that = this;
  this.id = id;
  this.iframe = document.getElementById(id);
  this.placeholder = this.createPlaceholder();
}

IFramePreloader.prototype = {

  /**
  * Initializes the preloader to wait till a load event occurs in the iframe.
  */
  init: function()
  {
    this.iframe.style.display = 'none';
    event_utils.add(this.iframe, 'load', function(e) { that.handleLoad(e); });
  },

  /**
  * Creates the placeholder for that Iframe.
  * @return {Element} The placeholder element.
  */
  createPlaceholder: function()
  {
    // Create placeholder.
    var newElement = document.createElement('div');
    newElement.id = this.id + '-placeholder';
    newElement.appendChild(document.createTextNode('Loading ...'));

    // Adding that placeholder right after the iframe. We first check if its the
    // last child, if so, we just append it. Otherwise, we insert it before the
    // next sibling.
    var parent = this.iframe.parentNode;
    if (parent.lastChild == this.iframe) {
      parent.appendChild(newElement);
    } else {
      parent.insertBefore(newElement, this.iframe.nextSibling);
    }
    return newElement;
  },

  /**
  * Show the frame, hide the preloader. Since it has been loaded!
  */
  handleLoad: function()
  {
    this.iframe.style.display = 'block';
    this.placeholder.style.display = 'none';
  }
}

Conclusion

As you have seen, it is very straight forward adding an indeterminate preloader to your iframe. Some may want images, flash, movies, or anything else. It is very easy to customize it. From the code above, createPlaceholder creates that placeholder. If you want an image, you can add an image easily there, same goes for any types.

If you have any questions, please let me know in the comments below or through email!

About this Article:

Comments (23) - Add yours, or View the replies

Categoy (Javascript)

Views (23157)

Digg it: Digg this article