预加载iframe

时间:2011-02-03 20:00:09

标签: javascript jquery iframe jquery-animate preload

        function toggle(){
            $("#tempc").toggle(
                function () {
                    $("#tempc").animate({width: 255, height: 220}, 1000);
                    $("#tempc").html("");
                    $("#tempc").css("background-color", "transparent");
                    $("#tempc").html("<iframe src='/src/stream.php?stream=1' width='255' height='225' frameborder='0' scrolling='no'></iframe><br><a href='javascript:;' onclick='hidegadget();' class='yellowblock'>Sluit</a>");
                },
                function () {
                    $("#tempc").animate({width: 50, height:50}, 1000);
                    $("#tempc").html("");
                    $("#tempc").css("background-color", "#FFFF00");

                    $.get('src/stream.php?stream=2', function(data002) {
                        $('#tempc').html(data002);
                    });
                }
            );
        }

        $.get('src/stream.php?stream=2', function(data002) {
            $('#tempc').html(data002);
        });

Hello stackoverflow,

前一段时间我正试图为div制作动画,好吧,它现在只有一件事。 第一个函数被激活时(从第3行开始),iframe被加载。但是现在,我怎么能预加载那个iframe?因为动画结束时iframe没有加载......

问候

2 个答案:

答案 0 :(得分:5)

使用JQuery,您不需要使用iframe。看一下.load()函数。 http://api.jquery.com/load

$('#tempc').load('src/stream.php?stream=1');

要预加载页面,只需创建一个隐藏的div并在准备好时显示它。

var stream2 = $('<div>').load('src/stream.php?stream=2').hide();
$('#tempc').html(stream2.html());

答案 1 :(得分:1)

首先加载iframe,挂钩到iframe上的onLoad(这可能会让你头疼,但是有点谷歌搜索会告诉你如何通过浏览器很好地完成这项工作)并运行你的动画这个事件。