Shadowbox.js iFrame Loads Too Slowly: How To Speed Up Shadowbox.js

shadowboxjsFirst off, the shadowbox.js library is an amazing tool in our arsenal. It’s pretty light weight and adds a really nice touch when displaying images. After reading up on the different usage and options that it supports, I found out that it can easily support any content by utilizing the iframe player built into the runtime. If you want to pop open a nice window to a link, you can use a version of the function below. All this will do is open a 640×480 window with the given URL passed into the function.

screenshot-www jvfconsulting com 2015-02-20 12-45-39

Now, one thing I noticed by using this approach was that there was a lag while showing the content after the shadowbox window opened up. I had just built a carousel video player for our JVF homepage and wanted the videos to pop open quickly and start playing fast. So it was bugging me that I could hit the flash player webpage links directly and they would play within 2-3 seconds, however, each time I loaded that same URL into shadowbox it would take 8-10 seconds.

I tinkered around with the “options” a bit, even turned off all animation and it would still take the same 8-10 seconds to load. I decided to jump into the JavaScript to see how I could speed things up. With shadowbox, they have this hook to make a nice transition into the player, however, it requires setting the URL to the iFrame after the object is loaded. This was ultimately the root of the lag issue.

The file that you’ll need to find is shadowbox-iframe.js and is found in the players directory within the shadowbox library. The first thing you’ll notice is that the file has been reduced by removing all the white space, which makes it quick to load, but annoying to maintain. Do a quick search for the beginning of the “src attribute upfront:

src=”‘+this.obj.content+'”

Now, to ensure that we don’t double load the content, cause a flicker and introduce more lag, let’s make sure to remove the original call on onLoad event. To solve this, look for the following text “b.location.href=this.obj.content” and comment it out:

/*b.location.href=this.obj.content*/

This fix was able to cut our load time in half! Give it a try and see if this helps speed up your own dynamic content. Enjoy!

shadowbox
  • Shadowbox can be such a pain! Even when you install it as a plugin within wordpress you can have issues if you have a custom theme. Sounds like JVF knows how to solve about every problem!

  • Cool – would definitely look into including videos in this kind of js. Very good for contrast issues (videos on a white background are not always easy to watch; this might lower abandonment rate). Thanks.

  • Sam

    Looks amazing. But does this support the Google Analytics tracking? Is it possible to add the code snippet and track actions? Thanks!