stop iframe from affecting load times

I use iframes on most my projects. They embed things ranging from ads to sponsors to announcements. Allot of people have contacted me asking why the pages take so long to load, and I simply reply "technical issues". The actual pages content loads, it just stays loading. I also use some iframes with 0 width and height with no frameborder.

I am trying to make the page say its loaded, but load the iframe in the background. I have searched everywhere and not found an answer. The closest I have found is how to make the iframe the lowest priority in loading time.

I have tried this:

(function(d){
var iframe = d.body.appendChild(d.createElement('iframe')),
doc = iframe.contentWindow.document;

// style the iframe with some CSS
iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";

doc.open().write('<body onload="' + 
'var d = document;d.getElementsByTagName(\'head\')[0].' + 
'appendChild(d.createElement(\'script\')).src' + 
'=\'\/path\/to\/file\'">');

doc.close(); //iframe onload event happens

})(document);

I have tried this:

$(window).bind("load", function() {
  $('#backup').prepend('<iframe src="https://web.archive.org/save/https://ppyazi.com/" width="0" height="0"></iframe>');
});
$(window).bind("load", function() {
  $('#uggaustraliancollection').prepend('<iframe src="https://web.archive.org/web/20180314120100/https://www.instagram.com/uggaustraliancollection/" width="100%" height="400"></iframe>');
});
$(window).bind("load", function() {
  $('#zuper').prepend('<iframe src="https://ppyazi.com/zuper/wall.php?username=quix" width="0" height="0"></iframe>');
});

<a href="https://www.instagram.com/uggaustraliancollection/" class="list-group-item list-group-item-action">
<?php $total = file_get_contents('stats.php') + 0.0001;
?>
<div id="uggaustraliancollection"></div>
<script type="text/javascript" src="//ylx-1.com/bnr.php?section=General&pub=315858&format=300x50&ga=g&mbtodb=1"></script> <noscript><a href="https://yllix.com/publishers/315858" target="_blank"><img alt=" " src="//ylx-aff.advertica-cdn.com/pub_2hpya3.png" style="border:none;margin:0;padding:0;vertical-align:baseline;" /></a></noscript>
<span class="badge badge-dark">Advertisment</span>
</a>

Solution

Since you indicated that none of the linked answers worked, here is a snippet that I have tested and works for me. Putting up a target div, I use a jQuery script to append a whole iframe to its contents on page load.

In HTML

<div id="cool_thing"></div>

In jQuery script:

$(window).bind("load", function() {
  $('#cool_thing').prepend('<iframe src="https://www.weather.gov/" width="680" height="380"></iframe>');
});

This is working starting point. I can imagine combining this with a static image that is replaced/removed when the function is running, and it will be hard to tell the difference.