Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to pre load iframes for faster loading

    When I click a button it shows an iframe(with 1 image), then when I click the button again,it loads a different iframe on the same location. This is slow. How to speed up?

    When we click and load images, it shows white for a fraction of second until the image loads when images change. I used a javascript to pre-load images and that 'white time' is not visible anymore coz it is fast. How to do the same with iframes so they will load fast on each click and the loading time is almost none.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Easy:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    iframe {
        display: none;
        width: 100%;
        height: 600px;
    }
    #frame1 {
        display: block;
    }
    #theForm input {
        height: 20px; width: 30px;
    }
    #theForm label {
        font-size: xx-large;
    }
    </style>
    </head>
    <body>
    <form id="theForm">
    <label><input type="radio" name="test" value="frame1" checked /> First</label>
    <label><input type="radio" name="test" value="frame2"/> Second</label>
    <label><input type="radio" name="test" value="frame3"/> Third</label>
    </form>
    
    <div id="allframes">
    <iframe id="frame1" src="http://www.cnet.com"></iframe>
    <iframe id="frame2" src="http://www.cnn.com"></iframe>
    <iframe id="frame3" src="http://www.codingforums.com"></iframe>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var rbs = document.getElementById("theForm").test;
          for ( var r = 0; r < rbs.length; ++r )
          {
              rbs[r].onclick = changeFrame;
          }
          function changeFrame( )
          {
              var iframes = document.getElementById("allframes").getElementsByTagName("iframe");
              for ( var i = 0; i < iframes.length; ++i )
              {
                  var fr = iframes[i];
                  fr.style.display = ( fr.id == this.value ) ? "block" : "none";
              }
          }
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    silvercat (08-04-2013)

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! Excellent way.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •