Lazy-loading flash objects

Question

I'm using the jQuery lazy-loading plugin to defer loading of below-the-fold images on a large web page. This works great. Now, I would like to apply the same technique to a large Flash object which is also below-the-fold. I don't think the lazy-load plugin handles things that aren't images (at least it doesn't look that way so far.) I may have to do it myself. In that case, how do I detect when the area containing the Flash object becomes visible?

Edit: I think I may be able to hack something up using the jQuery dimensions plugin and keeping track of the div containing the Flash object.

Edit2: OK, I've opened a bounty on this question. If anyone can get to it before I have a chance to play around with this over the weekend, +250 to you. :)

Answer 1

If memory serves me correctly, setting the wmode parameter of the flash object in the DOM to opaque will do this. There's a bit of dicussion about the various wmode settings here

Answer 2

hm, i don't know how this jquery prugin works, but you say it does what you want if you use an image - so why don't you place an image where your flash-object should be, set an onload for this image, and if this onload is fired, you replace the image with the flash-object you want (that is assuming the jquery-plungin does crazy stuff so the onload isn't fired before).

EDIT: i know that the onload-attribute for img-tags isn't allowed officially, but the most (all?) modern browsers support this (as far as i know) - and maybe this helps to get another solution without those problems...

Answer 3

I think the easiest way to go would be to edit the lazy load plugin and separate the detect-when-element-is-in-view code from the image-specific code. The in-view detect code triggers an "appear" event on the element (in your case a container/placeholder div) that you can hook into to load your Flash.

Answer 4

The reason lazyLoad doesn't work with your script is because lazyLoad looks at the "src" attribute which is absent on flash objects (and ).

In the lazyLoad src you should modify any place referencing the "src" attribute. You will need to know if the element is an object or embed and reference their "source" correctly.

for example (untested):

/* Save original only if it is not defined in HTML. */
if (undefined == $(self).attr("original")) {
   $(self).attr("original", $(self).attr("src") || $(self).attr("data") || $(self).find("embed").attr("src") );
}

If you are still interested in giving away that bounty let me know and I'll look into it a bit more.

Answer 5

Looking at the source code of the lazy loading plugin you'll see that there's not much magic happening. Basically there is two interesting things happening there:

• there is a method that determines where an element is relative to the fold by getting the height of the containing window and the offset of the element.
• also there's an event handler that listens for scroll events checking if any of the "hidden" images need to appear

So in order to lazy load I'd just reuse or rip out the functions that determine whether a given element is in the view or not. Hook up to the scroll event and if something needs to appear you embed the SWF using swfobject. That should do it.

Also have a look at the lazy load plugin source, it's really not hard.