0

I seek to have iframes load on the page after the rest of the page has loaded, for performance. Tried the following script

function createIframe(){
  var i1 = document.createElement("iframe");
  i1.src = "https://www.desmos.com/calculator/wqprgorphr?embed";
  i1.scrolling = "auto";
  i1.frameborder = "0";
  i1.width = "300px";
  i1.height = "300px";
  i1.style.border = "1px solid #ccc"
  document.getElementById("ifr1").appendChild(i1);
  };
  if (window.addEventListener){
  window.addEventListener("load", createIframe, false);}
  else if (window.attachEvent){
  window.attachEvent("onload", createIframe);}
  else {window.onload = createIframe;}
<div id="ifr1"></div>

- doesn't seem to work; the iframes still begin loading while equations on page are rendering. See full code for a demonstration: https://jsfiddle.net/r6bxgem3/115/ (view in 'bottom results' setting).

Any working alternatives? Help is appreciated.

(This does not work)

OverLordGoldDragon
  • 1
  • 9
  • 53
  • 101
  • If referring to if-else's, doesn't seem necessary according to [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) - added just in case anyway @CoryKleiser – OverLordGoldDragon Aug 31 '18 at 00:59
  • https://puu.sh/Bnanm/77a7579885.png – OverLordGoldDragon Aug 31 '18 at 01:06
  • Near the bottom of body, just above footer - Ctrl + F in Fiddle – OverLordGoldDragon Aug 31 '18 at 01:10
  • Have you tried using an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) instead? – Cory Kleiser Aug 31 '18 at 01:10
  • I seek to delay iframe loading, not expedite it (load 'immediately') – OverLordGoldDragon Aug 31 '18 at 01:13
  • What kind of 'onpage equations' are your referring to? When I read 'onpage equations' I assume you're referring to the page loading/rendering. If this is the case putting that javascript in a IIFE and before the `

    ` tag will result in the browser waiting until the page loads then calling the javascript function. If this is not the case then I am clearly misunderstanding the question.

     – Cory Kleiser Aug 31 '18 at 01:17
  • That's horrible. Just put the iframe in your html (With appropriate size so you don't trigger a redraw), but leave the src attribute blank. Then use one of your onload events to trigger a function that sets the src attribute. That way it doesn't reflow the whole layout. You are probably doing many more things like this or you wouldn't need to delay drawing a 300px calculator. – technosaurus Aug 31 '18 at 01:21
  • Like [this](https://jsfiddle.net/r6bxgem3/129/)? (HTML+JS under JS tab) Still loads iframes along equations. @technosaurus – OverLordGoldDragon Aug 31 '18 at 02:13
  • Tried IIFE - loads [even quicker](https://jsfiddle.net/r6bxgem3/137/).@CoryKleiser – OverLordGoldDragon Aug 31 '18 at 02:14
  • Like I said you are continuing to reflow the layout after the page has rendered. Your super-spiffy javascript library(ies) continues modifying the page after `window.load` has fired (Its ok,they are all crappy like that) so you need to have it tell you when its done so you can use timeouts to periodically check if it is done. Without a #minimal# working example that shows your problem, all you will get is speculations, not answers – technosaurus Aug 31 '18 at 04:14

0 Answers0