Fatal编程技术网

Javascript 如何预加载iFrame

javascript iframe

Javascript 如何预加载iFrame,javascript,iframe,preload,Javascript,Iframe,Preload,我有多个iFrame在一个页面中显示数据。 我想在查看当前视图时预加载接下来的3个iFrame。我的做法如下： 我将隐藏所有iFrame并为其设置源。 单击特定视图时，我将显示该视图，并在后台加载接下来的3个iFrame。 执行此操作时，浏览器选项卡中会显示一些加载，看起来一点也不好 如何在浏览器中消除这种加载以提高可用性 您无法摆脱浏览器加载指示 为什么不使用如下DOM操作创建iframe元素呢 你需要一个。。“一种”用于预加载iFrame的不可见容器。 您需要将iFrame放入文档体，否则它

我有多个iFrame在一个页面中显示数据。
我想在查看当前视图时预加载接下来的3个iFrame。我的做法如下：

我将隐藏所有iFrame并为其设置源。
单击特定视图时，我将显示该视图，并在后台加载接下来的3个iFrame。
执行此操作时，浏览器选项卡中会显示一些加载，看起来一点也不好

如何在浏览器中消除这种加载以提高可用性

  • 您无法摆脱浏览器加载指示

  • 为什么不使用如下DOM操作创建iframe元素呢

    • 你需要一个。。“一种”用于预加载iFrame的不可见容器。 您需要将iFrame放入文档体，否则它们将无法开始加载

    var container = document.createElement("div");

// this will prevent scrollbars in the container
container.style.overflow = "hidden";

// this ensures the container is always in the visible area
// sometimes browser don't load what's out of the viewscope so this would help against that
container.style.position = "fixed";

// this will turn the container "click through"
container.style.pointerEvents = "none";

// this will render the div invisible:
container.style.opacity = 0;

// this will try to put the container behind the <body> element:
container.style.zIndex = -1;

// this will remove any performance loss when scrolling:
container.style.willChange = "transform";

document.body.appendChild(container);

var framePreload = function (url) {
    var frame = document.createElement("iframe");
    frame.src = url;
    container.appendChild(frame);
    return frame;
};

var frame = framePreload("https://www.youtube.com/embed/aqz-KE-bpKQ?autoplay=1");

    var container=document.createElement（“div”）；
//这将阻止容器中的滚动条
container.style.overflow=“hidden”；
//这样可以确保容器始终位于可见区域
//有时浏览器不会加载viewscope之外的内容，所以这将有助于解决这一问题
container.style.position=“固定”；
//这将使容器“点击通过”
container.style.pointerEvents=“无”；
//这将使div不可见：
container.style.opacity=0；
//这将尝试将容器放在元素后面：
container.style.zIndex=-1；
//这将消除滚动时的任何性能损失：
container.style.willChange=“transform”；
文件.正文.附件（容器）；
var framePreload=函数（url）{
var frame=document.createElement（“iframe”）；
frame.src=url；
子容器（框架）；
返回框；
};
变量帧=帧预加载（“https://www.youtube.com/embed/aqz-KE-bpKQ?autoplay=1");
    从那里你有很多选择。我建议对原始帧的父元素使用replaceChild，这样您就可以将它们与预加载的帧交换。
    类似这样的内容：
    originalFrame.parentNode.replaceChild（frame，originalFrame）
    
您还需要重新设置类名等。
    

    好的，您也可以使用cloneNode将所有帧属性复制到新帧，而不是执行
    document.createElement（“iframe”）
    。
    我在这里回答了一个类似的问题：
    

    
在您的情况下，它将是：
    

    <link rel="preload" href="https://example.com/widget.html" as="document">

    

    

    
然后您可以像往常一样使用iframe：
    

    <iframe src="https://example.com/widget.html"></iframe>

    

    

    这就像一个符咒。Chrome抛出了一个关于“as”值的警告，但它似乎仍然起作用。似乎不起作用，这似乎与：它给我错误和状态转换为已取消。这肯定不起作用。我尝试了几种浏览器。加载时间不变。