如何预加载iframe

问题描述 投票:4回答:2
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);
});

不久前,我试图为div设置动画,现在,它只起作用一件事。激活第一个功能时(从第3行开始),并加载iframe。但是现在,我如何预加载该iframe?因为动画制作完成后,iframe不会加载。

javascript jquery iframe jquery-animate preload
2个回答
6
投票

使用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
投票

[首先加载iframe,然后将其挂接到iframe上的onLoad(这可能会让您头疼,但请稍稍进行一下搜索就可以告诉您如何使其在跨浏览器中正常工作),并从此事件运行动画。

© www.soinside.com 2019 - 2024. All rights reserved.