CODEWITHSUNDEEP
javascriptcssiframe
Acyra
Acyra

Reputation: 16044

add loading spinner to iframeSizer

Hi I'm using the the iframeSizer to load iframes dynamically. On the parent page I'm currently implementing this code to load the spinning preloader image with css:

<script type="text/javascript" src="//example.com/iframeResizer.min.js"></script> 

<style>

iframe{width:100%} 
.holds-the-iframe { 
    background:url(//example.com/preloader.gif) center center no-repeat;  
         }
</style> 

<div class="holds-the-iframe">
<iframe src="http://example.com/iframed-content-url" scrolling="no" frameborder="0"></iframe>
</div> 

<script>iFrameResize()</script>

The problem with this is if there is a transparent background on the iframe content, the spinner shows through. iFrameResizer has a bodyBackground option but that changes the entire body, not just the content inside of the iframe.

Any thoughts on how to improve this? Is there a way with CSS or JS to remove the spinner node completely after the iframe initially is loaded? Thanks!

Upvotes: 0

Views: 388

Answers (2)

Acyra
Acyra

Reputation: 16044

Thanks for the feedback. My simple solution was to just put the spinner as a background in the actual iframe css, rather than in a wrapper. Then the content overwrites it upon load.

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206344

The plugin allows you to use options,
one of them is bodyBackground and accepts a String value.

so you could perhaps give this a try:

iFrameResize({
    bodyBackground : "rgba(0,0,0,1) url(preloader.gif) 50% no-repeat"
});

Upvotes: 2

Related Questions