首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >异步加载博客上的所有iframe

异步加载博客上的所有iframe
EN

Stack Overflow用户
提问于 2014-12-20 21:25:29
回答 3查看 3.8K关注 0票数 0

我开了一个博客,里面有很多视频和其他有框架的内容。

我从数据库中拉出的一个典型的博客正文如下所示:

代码语言:javascript
运行
复制
<p>some text</p>
<iframe src="http://example.com" width="400" height="300"></iframe>
<p>some text</p>

一些帖子中有2-3个iframes起始页面通常有6-7个iframe。

我想加快我的博客的加载速度--有没有一种方法可以让我的起始页面异步加载所有的iframe?

EN

回答 3

Stack Overflow用户

发布于 2014-12-20 21:32:21

我建议您随身携带所有数据,并确定要加载的iframes,然后使用setTimeout加载不同的iframes集,并留出一定的时间间隔。

票数 2
EN

Stack Overflow用户

发布于 2014-12-20 22:26:28

正如有人在评论中所说,iframe异步加载。也许你正在体验的是主页面加载速度很慢,同时它也在加载iframes内容。我建议使用这种技术:

代码语言:javascript
运行
复制
<!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>

我希望这能帮到你!

票数 2
EN

Stack Overflow用户

发布于 2014-12-23 19:54:18

所以,在过去的几天里,我读了很多关于这个话题的文章。尤其是this article是有帮助的,因为它讨论了我面临的实际问题:一个迟来的onload()事件,它在加载所有iframe之后触发。

毕竟,我想出的是下面这几行jQuery代码,这些代码似乎对我很有效:

代码语言:javascript
运行
复制
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++;
    });
});

事情是这样的:我在使用和不使用此代码的情况下尝试了几次,并测量了DomReadyLoad事件。

DomReady事件几乎在同一时间触发(之前:1.58s,之后:1.60)

另一方面,Load事件提前触发(之前:8.19s,之后:1.92s)

在某种程度上,这实际上并没有提高加载速度,当然,不管怎样,在我看来。改善了用户体验。有什么意见或建议吗?

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27580672

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档