Question

我使用下面的代码（JQuery）来延迟div的加载，直到整个页面加载（代码，图像等并呈现）之后。它适用于Safari和Firefox，但不适用于Chrome。在Safari和Firefox上，网页加载并呈现所有内容，然后在浏览器显示所有内容都已加载后加载div（Facebook嵌入）（加载程序停止旋转，页面内容显示，浏览器开发人员工具说所有内容都已加载 - 不只是DOM）。但是在Chrome中，它只是在最后加载（在DOM内容之后），但是在加载和显示所有内容之前（就像在Safari和Firefox中一样，这是它应该如何以及我希望它如何工作）。我非常感谢有关在Chrome中使用此功能的任何帮助，就像在其他浏览器中一样！（我昨天问过，但我提供的答案并没有为我解决这个问题，我也许并不清楚我想要的东西（也许只是在DOM加载后才会被误认）所以我决定放它再一次，所以它更清楚。）

<script type="text/javascript">

  function insertFB(){
var html='<div class="fb-page" data-href="https://www.facebook.com/bobcaputolivingwell" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/bobcaputolivingwell"><a href="https://www.facebook.com/bobcaputolivingwell">Bob Caputo Living Well</a></blockquote></div></div>';
$("#FB_PAGE").html(html);
}

if (document.addEventListener){
document.addEventListener("DOMContentLoaded", insertFB, false);
}   

if (/WebKit/i.test(navigator.userAgent)){
var _timer = setInterval(function(){
if(/loaded|complete/.test(document.readyState)){
insertFB;
}
},10);
}  

window.onload = insertFB();  

</script>

Answer 1

您实际上在Chrome / Safari等浏览器中触发了3次该功能。您只需要以下内容。

function insertFB() {
    var html = '<div class="fb-page" data-href="https://www.facebook.com/bobcaputolivingwell" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/bobcaputolivingwell"><a href="https://www.facebook.com/bobcaputolivingwell">Bob Caputo Living Well</a></blockquote></div></div>';
    $("#FB_PAGE").html(html);
}

$(window).on("load", insertFB);

当加载事件和所有子元素已完全加载时，会将事件发送到元素。此事件可以发送到与URL关联的任何元素：图像，脚本，框架，iframe和窗口对象。

Answer 2

尝试使用jQuery -

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="/scripts/jquery.min.js"></script>
        <script type="text/javascript">

            var html = '<div class="fb-page">Page Loaded.</div>';

            $(window).load(function() {
                $("#FB-PAGE").html(html);
            });

        </script>
    </head>
    <body>
        <div id="FB-PAGE"></div>
    </body>
    </html>

Answer 3

我认为您只想使用“加载”事件。 DOMContentLoaded应该在DOM准备好但资源加载之前触发。请参阅Mozilla Developer Network中的DOMContentLoaded说明：

初始HTML文档具有时触发DOMContentLoaded事件已完全加载和解析，无需等待样式表，图像和子帧完成加载。一个非常不同的事件 - 负载 - 应仅用于检测完全加载的页面。在DOMContentLoaded中使用load是一个非常流行的错误更合适，所以要小心。

在页面完全加载后加载div的JQuery在Chrome中不起作用，但在Safari和Firefox中

3 个答案: