Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting iFrame CSS to display:none during load

I have this:

<div class="upload_slide">
    <iframe class="upload_iframe" style="visibility:hidden;"></iframe>
</div>

If I then post some files to the iFrame and set .upload_slide to display:none;, while it's loading, will this affect the loading of the iFrame or the detection of when it finished loading?

like image 493
ShadowStorm Avatar asked Sep 30 '12 13:09

ShadowStorm


People also ask

Does an iframe with display none still load?

No, the iFrame's loading and load detection should not be compromised by setting the display to none. CSS is just for style, it has no ability to affect the DOM. Setting display:none on an <img> (or any of its parents) will prevent it from loading.

How do I make an iframe invisible?

Hide the iframe to all users The solution for hiding the iframe , including help tools users, is to add a aria-hidden='true' attribute on the iframe . The scripts contained in the iframe will always be executed. In addition, you can add a tabindex attribute to prevent the focus from moving in the iframe .

Does display none prevent video from loading?

If you are asking about the css display: none then the answer is the video will still be loaded over the mobile network but it would not be visible to the end user.

Does display none help performance?

Display none don't improve the performance because the goal of virtual scrolling is reduce the number of the elements into the dom. Make an element display none or remove an element, trigger a reflow, but with display none you worst the performance because you don't have the benefit of reduce the dom.


2 Answers

No, the iFrame's loading and load detection should not be compromised by setting the display to none.

CSS is just for style, it has no ability to affect the DOM.

like image 113
TheCarver Avatar answered Sep 22 '22 03:09

TheCarver


There shouldn't be a problem but if there is, a good trick can be to move the element offscreen rather than hiding it. You can create a class like

.offscreen{
    position: absolute;
    left: -5000px;
}

which you can add and remove as needed.

like image 36
robC Avatar answered Sep 20 '22 03:09

robC