在页脚加载 lazyloaded button.js

Question

我的网站上有来自 sharethis 的社交媒体图标。为了防止 sharethis 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>

Answer 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>

在页脚加载 lazyloaded button.js

Load lazyloaded button.js in footer

javascript

wordpress

jquery

lazy-loading

sharethis