0

我们有一条线吧！我们页面上的共享按钮，它会阻止加载我们自己的资源，这会导致很大的性能问题。

随着line.me 提出的 Line Share 按钮的实现，他们的 line-button.js 脚本需要包含在页面中间，该按钮应该显示在哪里。该按钮替换了<script>它启动的元素：

<script type="text/javascript">
    new media_line_me.LineButton({"pc":false,"lang":"en","type":"b"});
</script>

在我们自己的完成后，我可以将 line-button.js 脚本添加到页面中：

function includeLine(callback) {
    var script = document.createElement('script');

    script.async = true;

    script.onload = callback;

    script.src = "//media.line.me/js/line-button.js?v=20140411";

    document.body.appendChild(script);
}

然后我可以像这样注入脚本元素：

function initLine() {
    var 
        script = document.createElement('script'),
        line = ['new media_line_me.LineButton({"pc":false,"lang":"'];

    line.push(util.getLang());
    line.push('","type":"b"});');

    script.text = line.join('');

    publ.$elements.shareLine.append(script);
};

但是在 line-button.jsmedia_line_me.LineButton中为事件附加了一个监听器，window.onload此时这已经发生了。

我真的想确保在任何社交媒体小部件开始加载之前完成所有其他工作。但现在我有点没有想法。

是否有另一种解决方案不是将 JS 文件作为文本加载，然后在我们的脚本中重写eval()它？

4

1 回答 1

0

这里是你的完美答案

动态LINE分享按钮

Github——naver LINE 动态分享按钮

动态分享按钮增加：

  • 两者的css类<a>和<img>

  • 所有选项现在都是元属性

  • 异步加载，无需交互！！

示例用法

<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
    <head>
        <meta name="naver-line-selector" content="" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:url"    content="http://www.google.com" />
        <meta property="og:title" content="Dynamic Share button 0" />
        <script src="jquery.js"></script>
        <script>
            jQuery(document).ready(function() {
                $('meta[property="og\\:url"]').attr('content', 'https://www.google.com');
                $('meta[property="og\\:title"]').attr('content', 'Lets exchange LINE');
                $('meta[property="og\\:locale"]').attr('content', 'en_US');
                $('meta[name="naver-line-selector"]').attr('content', '#after-this');
               (function(d) {
                   var po = d.createElement('script');
                   po.type = 'text/javascript'; po.async = true;
                   po.src = 'naver-LINE-share-button.js?v=20140411';
                   var s = d.getElementsByTagName('script')[0];
                   s.parentNode.insertBefore(po, s);
              })(document);
          });
        </script>
    </head>
    <body>
        <div id="after-this"></div>
    </body>
</html>

请注意，实现是纯 javascript。为方便起见，jQuery $.ready 仅用于 html

呼吁采取行动

可以使用以下

  • 带圆角的光滑按钮

  • 广泛传播这个 JavaScript 库

于 2016-05-15T07:35:57.697 回答