在页脚中加载lazyloaded button.js

时间:2015-07-13 07:15:30

标签: javascript jquery wordpress lazy-loading sharethis

我在我的网站上有来自sharethis的社交媒体图标。为了防止sharet这个button.js被渲染阻塞,我使用了一个lazyload js插件http://blog.akademy.co.uk/2013/05/controlling-javascript-with-lazyload-a-sharethis-example/。 它完美无缺,但我还有一个要求。 我希望这个插件能够将button.js延迟到标签的末尾。目前它将它放在标签中。 有人可以帮忙吗?

这是我的代码示例: //调用jquery插件

<script type="text/javascript" src="lazyload-min.js" defer="on" async="on">
</script>

在标签末尾的某处,我使用了这段代码:

<script type="text/javascript"> 
  window.onload = function() {
    var switchTo5x=false; 
    LazyLoad.js( 'http://w.sharethis.com/button/buttons.js', function () {
      stLight.options( 
        { publisher: "YOUR-UUID", doNotHash: true, doNotCopy: true } 
      );
    });
  }
</script>

1 个答案:

答案 0 :(得分:1)

我找到了解决此问题的方法。

我们不需要使用lazyload.js插件。

在我们的服务器上下载后,我们可以简单地延迟加载sharethis button.js并在回调函数中传递参数。

以下是代码示例:

<script type="text/javascript"> 
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    function downloadJSAtOnload()
    {
        var media_element = document.createElement('script');
        media_element.src = '/buttons.min.js'; //sharethis button.min.js
        media_element.onload = function()
                                {
                                    stLight.options({publisher: "YOUR-UUID", doNotHash: true, doNotCopy: false, hashAddressBar: false, async: true});
                                };
        document.body.appendChild(media_element);            
    }
</script>