Question

我正在尝试推迟Google Plus，Facebook和Twitter的html，css和js功能。

如果不延迟html，我可以让一切工作。一旦我添加推迟的html一切正常（延迟的html和css）除了谷歌加和Twitter按钮...既不会出现，但Facebook按钮会。试图避免使用jquery。

index.html而不推迟html和css

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>

in 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');

在这里工作小提琴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>

in 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

我正在尝试推迟Google Plus，Facebook和Twitter的html，css和js功能。

为什么？无论如何，这些脚本都是异步加载的;并且“推迟”那一小段HTML代码，本身什么都不做 - 你想从中获得什么好处？

无论如何，AFAIK所有这些脚本都默认设置为解析文档，以便在完成加载后替换元素 - 所以如果你的“延迟”HTML代码已经没有进入DOM，他们会发现什么都没有用，什么都不做。

因此，您必须指示所有人在加载时都不进行解析，但稍后会对此进行解析（对于Facebook而言，这意味着从脚本地址中删除#xfbml=1并调用{{ 1}}以后;对于另一个我不知道我的头顶）;或者不直接嵌入它们，但只有在之后才能进行AJAX调用＆amp; HTML插入已完成（通过将这些自执行函数放在回调中）。

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

推迟HTML，CSS和＆amp; Javascript函数

1 个答案: