[Plugin: Lazy Load] Lazy load iframes (Youtube etc.)

Creating an iframe lazy loader should actually be quite similar to an image lazy loader.

I will see if I can make that an option in bj-lazy-load, but no guarantees ??

As an additional option for that, what about timed loading? On a page where there are many iframes, it can make sense to start the loading of consequent iframes only a bit after the previous one started loading. For example on the site where loading 10 Youtube videos in iframes freezes some computers for 30 seconds, chaining the loading of them to be started in three second intervals might solve the situation entirely.

As a timeline, it might result in something like this:

First second: First video starts loading
Fourth second: Second video starts loading
Sixth second: First video finished loading
Seventh second: Third video starts loading
Ninth second: Second video finished loading

Having this in options would let site admins to see what works best for their intended configuration. Even a 0.5 second interval can avoid the performance bottleneck from getting stuffed as the first videos will finish loading before the last ones are begun loading.

The intended usage is to increase the interval by 0.1 seconds until there are no reports of sluggishness. Technically there’d be a timer and a queue, which let the first one in the queue to start loading only after the time is full since beginning the loading of the previous one.

This would be especially handy on a new layout I’m planning that might subsequently end up being used on many sites. On it the front page doesn’t load 10 Youtube videos as full posts, but shows a thumbnail and title for maybe 15-30. As soon as possible we’d like to try this with embedded videos instead of thumbnail images so the users could play the videos straight on the front page.

Most of these would be above the fold, so lazy loading might not solve the situation. This would be an excellent complement to lazy loading. If a user scrolls down fast enough to reveal a dozen items to lazy load, they won’t freeze the computer. Could also be useful for images.

Timed loading looks interesting.

It won’t save you bandwith, but will make sure the most important images (or iframes) gets loaded first.

Possibly the most important benefit of timed loading is to avoid choking by loading too many items at a time.

I’ve patched the lazy-load plugin to work seamlessly with iframes. It’s a relatively simple change. Link here.

I haven’t tested it in multple browsers, but it works well in chrome/safari/firefox on a mac.

This plugin is not working well on my site Cricket Highlights. I’m using fb iframe, and some external content, I want to lazy load all of them.
How can i get all in one?

I had some issues with your code splitrocket. However, I was able to get it to work.

In the lazy-load.php file, find the return $content line right before the function get_url and add this:

$content = preg_replace( '#<iframe([^>]+?)src=[\'"]([^\'">]*)[\'"]([^>]*)>#', sprintf( '<iframe${1}src"%s" data-lazy-src="${2}"${3}><noscript><iframe${1}src="${2}"${3}></noscript>', 'about:blank' ), $content );

In the lazy-load.js file, replace this:

jQuery( 'img[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {

with this:

jQuery( '[data-lazy-src]' ).bind( 'scrollin', { distance: 200 }, function() {

With the code above, my Youtube iframes would only load when scrolled within that specified distance. It made a HUGE difference in the user experience.

Thanks for the updates. I look forward to putting those into action with the coming updates of our sites.

This plugin is not working well on my site Crictime50.com. How can i get all in one?