让iframe载入前没有大片空白区域

2013年2月26日01:49:16 18 9,547

前段时间微博流行,很多博客也加入了微博秀,并肩作战,记录生活和折腾时用博客,短句记录和发牢骚时用微博,本站从一开始就一直把微博秀融入wp的侧边栏,很明显,既然是个人博客,少不了展示日常吐槽,就把它当做公告栏或信息栏。

曾twitter火爆的时候,大家都在绞尽脑汁的同步推的信息在侧边栏,后来微博大火了,国内微博也陆续上阵,因为侧边栏的同步延迟问题,很多人干脆直接调用官方的微博秀,解决同步时间延迟的问题,功能上更强大更美观更互动,唯一缺点是通过iframe嵌套载入侧边栏,大部分做网站的人都不喜欢嵌套网页。

第一:对seo不友好。
第二:w3c标准不好通过。
第三:对整个网页显示体验不佳,载入网页有延迟和空白。
第四:有的浏览设备不支持显示嵌套,不能保证完整性。

这些是我个人认为,可能还有其他一些的影响,不过第一条,嵌套一个可能不会影响seo,第二条,w3c可以调试通过,第四条,只要不是塞班那种老手持设备,大部分浏览器都支持显示嵌套网页,最后就是第三条,哎,有人会说,绕了一圈,原来就是这个问题啊,对,可能对你来说很简单,但是对我这个对代码有恐惧症的人来说,也许怎么折腾都是浪费时间,不过既然文章都写到这里了,你一定知道,我已经折腾出来了,具体刷新本站首页,查看侧边栏微博的显示变化,呵呵,现在分享一下如何实现:

还是有必要再解释一下我们要做什么,大家都知道,微博秀的代码是使用iframe嵌入网页的,当你进入一个网站的时候,会发现其他都显示了,就微博秀显示得最慢,因为它比你的网站载入要慢一些,这就造成页面都显示完了,那个地方还空白着,要等一会才能显示出微博来,这样是不是很不爽?也许你会说那就放侧边底部去,看不见不就得了,但是微博最佳的位置其实就是侧边栏顶部,放其他地方会被很多人直接无视,你可以想象公告栏没人把它放底部吧,好了,可以开始了。

简单的说,就是不让iframe还没载入完网页时那个地方显示空白,在页面未载入前,那个地方内容应该是紧凑的,等网页载入完成了,那么就撑开指定的高度,显示iframe载入的网页。换句更简单的话说,这是一个非一般的iframe自适应高度的js实现方法

iframeheight02iframeheight01

可能是最简单的解决方法:

<h3>我的微博</h3>
<ul>
<iframe id="frame_content" src="http://show.v.t.qq.com/index.php?c=show&a=index&n=zhengyong100&w=0&h=548&fl=2&l=30&o=17&co=0" scrolling="no" frameborder="0" width="260" onload="this.height=400"></iframe> //这个地方是关键,一旦iframe设置高度,那个地方就会空白出来。
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height =  height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 0); //这个后面的0很有用处,你可以设置未载入网页时的高度,关键也在这里,设置0,那么就没有空白了。
</script>
</ul>

在研究出来之前,我尝试了很多其他方法,试图填补那个空白,为了不让进入网站感觉有空白和延迟,还在那地方放了一个gif的载入loading图片,但在loading图片下面还是空白一大片,后来还用了之前所使用的“提高页面载入速度(广告载入)”的那套方法,把iframe放在底部,然后在显示loading的那个位置显示出来,这种方法虽然能达到我要的效果,可惜根本就显示不出来,对iframe没用,只能是一些广告代码和简单的网页代码,而现在这个方法,太完美了!还兼容IE,FF等浏览器,呵呵,不知道大家是不是有更好更简单更完美的解决方法呢?

好啦, 终于让iframe嵌套网页载入前没有空白区域了,不过还是很希望在载入前加入个loading图片,这个稍后在折腾。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:18   其中:访客  12   博主  6

    • 夏宇轩网赚博客 2
      Internet Explorer 8 Windows XP

      博主真是太有才了

      • chojemmy 6
        Google Chrome 24 Windows 7

        其实我觉得我的侧边栏推特信息就挺好的,不会显得突兀。是不是显示纯文字的更好,你说呢?

          • 郑永 Admin
            Android Webkit 4 Android 4.1.2

            曾就因为其他原因,想换成纯文本,可惜还是喜欢官方的,互动强。

            @chojemmy

          • 小蝴蝶 7
            Google Chrome 25 Windows 7

            我的沙发.,…我的板凳 …. :cry:

              • 郑永 Admin
                Android Webkit 4 Android 4.1.2

                呵呵,不复返。

                @小蝴蝶

              • 刘柳 2
                Sogou Explorer Windows 7

                这些懂得少就没有去搞过

                • 菜根博客 0
                  Firefox 19 Windows XP

                  这个方式不错,能够很好的避免大量空白的问题

                    • 郑永 Admin
                      Firefox 19 Windows XP

                      恩,就是这个用处。

                      @菜根博客

                    • 鲜活优惠码 4
                      Internet Explorer 9 Windows 7

                      没试过调用微博内容

                      • 美国服务器 2
                        TheWorld Browser Windows 7

                        还是没心思去折腾微博

                          • 郑永 Admin
                            Firefox 19 Windows XP

                            微博不用折腾,直接发牢骚就好。

                            @美国服务器

                          • sui 1
                            Google Chrome 21 Windows 7

                            来看看 呵呵

                              • agting 4
                                Google Chrome 25 Windows XP

                                好好看吧,呵呵。

                                @sui

                              • 平顶山 2
                                Google Chrome 24 Windows XP

                                :?: 过来看看兄弟!

                                • 我的名字叫麒 4
                                  Google Chrome 25 Windows 7

                                  对iframe有点反感

                                  • zwwooooo 9
                                    Firefox 19 Windows 7

                                    我个人不会在自己博客上使用iframe,不太喜欢调用其他地方数据。

                                      • 郑永 Admin
                                        Firefox 19 Windows XP

                                        是啊,大多数人都不喜欢,所以我把微博秀给卸下了。

                                        @zwwooooo