How to display loading message when an iFrame is loading

Question

I have an iframe that loads a third party website which is extremely slow to load   Is there a way I can display a loading message while that iframe loads the user doesn t see a large blank space   PS  Note that the iframe is for a third party website so I can t modify   inject anything on their page

User · Accepted Answer

I have done the following css approach    lt div class  holds-the-iframe  gt  lt iframe here gt  lt  iframe gt  lt  div gt    holds-the-iframe     background url    images loader gif  center center no-repeat

User · Answer

You can use as below      showFrame   on  load   function              loader hide

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt title gt jQuery Demo - IFRAME Loader lt  title gt   lt style gt   frameWrap       position relative      height  360px      width  640px      border  1px solid  777777      background  f0f0f0      box-shadow 0px 0px 10px  777777      iframe1       height  360px      width  640px      margin 0      padding 0      border 0      loader1       position absolute      left 40       top 35       border-radius 20px      padding 25px      border 1px solid  777777      background  ffffff      box-shadow 0px 0px 10px  777777     lt  style gt    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt  lt  script gt   lt  head gt   lt body gt    lt div id  frameWrap  gt   lt img id  loader1  src  loading gif  width  36  height  36  alt  loading gif   gt   lt iframe id  iframe1  src  https   bots actcorp in ACTAppChat chat authtext test user8 com amp authToken 69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e   gt  lt  iframe gt   lt  div gt   lt script gt        document  ready function                  iframe1   on  load   function                      loader1   hide                         lt  script gt    lt  body gt   lt  html gt

User · Answer

Yes  you could use a transparent div positioned over the iframe area  with a loader gif as only background    Then you can attach an onload event to the iframe      document  ready function            iframe id   load function               loader-id   hide

User · Answer

If it s only a placeholder you are trying to achieve  a crazy approach is to inject text as an svg-background  It allows for some flexbility  and from what I ve read the browser support should be fairly decent  haven t tested it though     Chrome    27 FireFox    30 Internet Explorer    9 Safari    5 1   html    lt iframe class  iframe-placeholder  src    gt  lt  iframe gt    css    iframe-placeholder      background  url  data image svg xml charset utf-8  lt svg xmlns  http   www w3 org 2000 svg  width  100   height  100   viewBox  0 0 100  100   gt  lt text fill   23FF0000  x  50   y  50   font-family    Lucida Grande    sans-serif  font-size  24  text-anchor  middle  gt PLACEHOLDER lt  text gt  lt  svg gt    0px 0px no-repeat      What can you change   Inside the background-value    font size  look for font-size    and change the value to anything you want font color  look for fill     Don t forget to replace the   with  23 if you re using hexadecimal color notation   23 stands for a   in URL encoding which is necessary for the svg-string to be able to be parsed in FireFox  font family  look for font-family    remember to escape the single quotes if you have a font that consists of multiple words  like with   Lucida Grande    text  look for the element value of the text-element where you see the PLACEHOLDER string  You can replace the PLACEHOLDER string with anything that is url-compliant  special characters need to be converted to percent notation    Example on fiddle  Pros    No extra HTML-elements No js Text can easily       be adjusted without the need of an external program It s SVG  so you can easily put any SVG you want in there    Cons    Browser support It s complex It s hacky If the iframe-src doesn t have a background set  the placeholder will shine through  which is not inherent to this method  but just standard behaviour when you use a bg on the iframe    I would only recommend this only if it s absolutely necessary to show text as a placeholder in an iframe which requires a little bit of flexbility  multiple languages        Just take a moment and reflect on it  is all this really necessary  If I had a choice  I d go for  Christina s method

User · Answer

Here s a quick solution for most of the cases   CSS    iframe-loading        background url  img loading gif  center center no-repeat       You can use an animated loading GIF if you want to   HTML    lt div class  iframe-loading  gt       lt iframe src  http   your iframe url goes here   onload      iframe-loading   css  background-image    none     gt  lt  iframe gt   lt  div gt    Using the onload event you can remove the loading image after the source page is loaded inside your iframe   If you are not using jQuery  just put an id into the div and replace this part of code       iframe-loading   css  background-image    none      by something like this   document getElementById  myDivName   style backgroundImage    none     All the best

User · Answer

iframe   load function              loading   remove        alert  iframe is done loading      show       lt iframe src  http   www google com  style  display none   width  600  height  300   gt   lt div class  loading  style  width 600px height 300px   gt iframe loading lt  div gt

User · Answer

You can use below code    iframe  background url    images loader gif  center center no-repeat  height  100

User · Answer

I think that this code is going to help   JS       foo   ready function              loadingMessage   css  display    none            foo   load function              loadingMessage   css  display    none          HTML    lt iframe src  http   google com   id  foo  gt  lt  iframe gt   lt div id  loadingMessage  gt Loading    lt  div gt    CSS    loadingMessage       width  100       height  100       z-index  1000      background   ccc      top  0px      left  0px      position  absolute

User · Answer

I have followed the following approach  First  add sibling div      lt div class  loading  gt  lt  div gt    insertBefore   Iframe      and then when the iframe completed loading      Iframe   load function         this  siblings   loading-fetching-content   remove

[javascript] How to display loading message when an iFrame is loading?

Examples related to javascript

Examples related to jquery

Examples related to iframe