Pinterest lazy loading issues

mattwondra commented 12 years ago

Hi David, et al —

It look like using the prescribed implementation, lazy loading isn't possible for Pin It buttons. See the demo.

When you activate any section, every Pin It button on the page is loaded. Even the last Pinterest link, which is class-less & independent from Socialite, is loaded as a Pin It button. It seems the Pin It script sniffs for matching hrefs, even if it doesn't have class pin-it-button (as you might expect from the the button code generator).

I'm not sure the best way to handle this... My first thought is, when Socialite is loaded change all Pin It link hrefs to data-hrefs so that the Pinterest script doesn't pick up & pre-load all the button stubs. This keeps the same developer implementation and it degrades for JS-less users.

Any thoughts on a better way? —Matt Wondra

PS — Thanks for your work on this project, really looking forward to using it in production!

dbushell commented 12 years ago

Hi Matt,

thanks, I noticed that happening myself but haven't had a chance to test yet, your demo confirms it :)

I was a bit stumped but your idea is very clever indeed. In fact, in may be a useful technique for other buttons too. Some kind of intermediate, normalised code that Socialite can activate. This may avoid conflicts with other unsupported widgets and rogue scripts too. I'm getting a lightbulb moment!

Socialite "2" is currently being planned to solve issues like this. I'm hoping to get something online soon.

dbushell commented 12 years ago

Socialite v2 now has a .process() function that can remove these conflicts.

It's not perfect at the moment, haven't decided whether it'll be a manual option or happen automatically after the first load...

mattwondra commented 12 years ago

I updated my demo page with the latest Socialte v2, and the problem has been solved: Updated demo

Thanks for the speedy update!

dbushell commented 12 years ago

Good to know! At the moment .process() removes some of the default links like Twitter in your example. You could do this (below) if only Pinterest is causing trouble.

Socialite.process(document, Socialite.getElements(document, 'pinterest-pinit'));

$('section').hover(function() {
    Socialite.load(this);
});

http://jsfiddle.net/cmdVN/2/

tmort / Socialite

Pinterest lazy loading issues #16