javascript - 延迟 HTML、CSS 和 Javascript 函数

Question

我正在尝试延迟 Google Plus、Facebook 和 Twitter 的 html、css 和 js 函数。

在不延迟 html 的情况下，我可以让一切正常工作。一旦我添加了 html 的延迟，一切正常(延迟的 html 和 css)除了 Google Plus 和 Twitter 按钮......都没有出现，但 Facebook 按钮确实出现了。尽量避免使用 jquery。

不延迟 html 和 css 的 index.html

CSS

#soc {
    list-style-type:none;
    text-align:left;
    line-height:.6;
    margin-left:-40px
}
#soc li {
    display:inline-block;
    max-width:100%;
    padding:3px
}

html

<div id="ac">
<ul id="soc">
    <li><div class="g-plusone" data-size="medium"></div></li>
    <li><div class="fb-like" data-href="http:/example.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div></li>
    <li><a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="test">Tweet</a></li>
</ul>
</div>

<script>function downloadJSAtOnload(){
var element=document.createElement("script");
element.src="speed.js";
document.body.appendChild(element);
}
if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);
else 
if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);
else window.onload=downloadJSAtOnload</script>

在 speed.js 中

(function () {
    var po = document.createElement('script');
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
})();

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

! function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, 'script', 'twitter-wjs');

在这里工作 fiddle http://jsfiddle.net/hWXNH/

index.html - 从 div id ac 中删除所有 html 并将其移动到名为 speed.html 的外部 html 页面并删除所有 css 并将其移动到名为 social.css 的外部 css 页面

<div id="ac"></div>

<script>function downloadJSAtOnload(){
var element=document.createElement("script");
element.src="speed.js";
document.body.appendChild(element);
}
if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);
else 
if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);
else window.onload=downloadJSAtOnload</script>

在 speed.js 中

var xObj = new XMLHttpRequest();
xObj.open('GET', 'speed.html', true);
xObj.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        document.getElementById("ac").innerHTML = this.responseText;
    }
};
xObj.send();

var stylesheet = document.createElement("link");
stylesheet.href = "social.css";
stylesheet.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(stylesheet);
window.___gcfg = {
    parsetags: 'onload'
};

(function () {
    var po = document.createElement('script');
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
})();

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

! function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, 'script', 'twitter-wjs');

当我延迟 html 时，是什么破坏了 Google Plus One 和 Twitter 按钮而不是 Facebook 按钮？

Answer 1

I am trying to defer the html, css, and js functions for Google Plus, Facebook, and Twitter.

为了什么？无论如何，脚本都是异步加载的；并“延迟”一小段 HTML 代码，本身什么都不做 – 您应该从中获得什么好处？

无论如何，AFAIK 所有这些脚本都默认设置为解析为文档以在完成加载后替换元素 - 因此，如果您的“延迟”HTML 代码到那时还没有进入 DOM，他们会发现无事可做，也无事可做。

所以你要么必须指示它们在加载时不解析，但在稍后的某个时候执行(对于 Facebook 这意味着从脚本中删除 #xfbml=1地址，并稍后调用 FB.XFBML.parse；对于其他的我不知道我的头顶)；或不直接嵌入它们，但仅在 AJAX 调用和 HTML 插入完成后(通过将这些自执行函数放入回调中)。

但正如我所说，我怀疑“延迟”一小段 HTML 代码是否会带来任何可衡量的好处；看起来这只会给您带来更多麻烦。