如何动态添加"pin it"按钮?

And*_*wby 5 javascript jquery pinterest

我正在尝试优化我的Wordpress安装 - 我看到的其中一个罪魁祸首是Pinterest的" Pin It "按钮小部件.我现在正试图找到一种动态加载JS代码的方法(当它们最初悬停在按钮上时),然后将其应用到页面.到目前为止,我只能做到这一点:

jQuery(document).on("mouseenter click",'.pinItSidebar', function() {
    jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
        // do something here?
    });
});
Run Code Online (Sandbox Code Playgroud)

我似乎无法找到一个我可以调用的函数(作为一个回调,在加载JS之后).显然我每页加载只会做一次(上面只是一个非常基本的版本)

有没有人对我如何实现这一点有任何建议?我希望它如何运作的最终游戏是:

它目前如何运作的例子

工作方案:

这是我现在得到的一个可行的解决方案,只有当他们点击按钮(然后再触发开启器)时,才允许你加载pinterest东西.这背后的想法是,它节省了大量的Pinterest JS/CSS/onload调用,这减慢了页面的速度.

jQuery(document).on("click",'.pinItSidebar', function() {
    if (typeof PinUtils == "undefined") {
        jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
            PinUtils.build();
            PinUtils.pinAny();
        });
    } else {
        PinUtils.pinAny();
    }
});
Run Code Online (Sandbox Code Playgroud)

......只需拨打:

<a href="javascript:void(0);" class="pinItSidebar">foo</a>
Run Code Online (Sandbox Code Playgroud)

希望这有助于节省其他人一些时间:)

额外的调整:我只是在玩,看看我能不能让它更加出色:)基本上,我希望能够决定哪些图像是可以固定的.在下面这将为您做到这一点:

jQuery("img").each(function() {
    if (jQuery(this).data('pin-do')) {
        // its ok, lets pin
    } else {
       jQuery(this).attr('nopin',"1");
    }
});
Run Code Online (Sandbox Code Playgroud)

你需要做的就是使图像可以固定,让data-pin-do="1"param设置你想让它们分享的图像:)