Question

我经营着一个博客，其中包含大量视频和其他框架内容。

我从我的数据库中提取的典型博客文章正如下所示：

<p>some text</p>
<iframe src="http://example.com" width="400" height="300"></iframe>
<p>some text</p>

有些帖子中有2-3个iframe - 起始页通常包含6-7个iframe。

我想加快我博客的加载时间 - 有没有办法让我的起始页面上的所有iframe异步加载？

Answer 1

我建议您随身携带所有数据，并确定要加载的iframes并使用setTimeout加载不同的iframes一组时间间隔。

Answer 2

有人在评论中说， iframe 异步加载。也许你正在经历的是主页面的加载缓慢，同时它也加载了iframes内容。我建议使用这种技术：

<!DOCTYPE html>
<html>
<head>
<title>speedup page with iframes</title>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    some content
    <br>
    some other content
    <br>
    <iframe id="data_a"></iframe>
    <br>
    some wild content appears
    <br>
    <iframe id="data_b"></iframe>
    <br>
    some wild content appears
    <br>
    <iframe id="data_c"></iframe>
    <br>
    the end

    <script>
    $(function(){
        //the iframes will only load AFTER your
        //main page is fully loaded
        $("#data_a").attr("src", "http://domain1.com/some/path/news.html");
        $("#data_b").attr("src", "http://domain2.com/gallery/pictures.html");
        $("#data_c").attr("src", "http://domain3.com/contact/map.html");
    });
    </script>

</body>
</html>

我希望这有帮助！

Answer 3

所以，我在过去几天里读了很多关于这个话题的内容。特别是this article很有用，因为它讨论了我遇到的实际问题：在加载所有iframe后触发的迟到的onload()事件。

毕竟，我想到的是这些jQuery-Code系列似乎对我有用：

var src = new Array();
$(function(){
    // onDomReady() store all iframe sources in array
    $('iframe').each(function(){
      src.push($(this).attr('src'));
      $(this).attr('src', '');
    });
});

$(window).load(function() {
    // onload() restore all iframe sources from the array
    var i = 0;
    $('iframe').each(function(){
        $(this).attr('src', src[i]);
        i++;
    });
});

所以这就是交易：我在使用和不使用此代码的情况下尝试了几次，并测量了DomReady和Load个事件。

DomReady事件大约在同一时间触发（之前： 1.58s ，之后： 1.60s ）

另一方面，Load事件更早发生（之前： 8.19s ，之后： 1.92s ）

在某种程度上，这并不是实际提高加载速度，当然 - 无论如何，在我看来。用户体验得到改善。有任何意见或建议吗？

异步加载博客上的所有iframe

3 个答案: