Search code examples
javascripthtmliframe360-panoramapannellum

How to show heavy websites with iframe?

I have a website with five different size variants.

My main point would be that I would like to show two 360°-images on my website with Pannellum viewer.

I tried to use iframe for showing two 360°-images to website, but then the website was too slow. Other elements are showing after the 360°-image iframes were downloaded.

I also tried to load the iframes with javascript, which loads the iframes after the other elements are loaded:

<script>
    function frameloading() {
        var frameone= document.getElementById("delayedframe");
        frameone.src = "360°-image url"
    };
    window.addEventListener("load",(frameloading));

      </script>


<iframe id="delayedframe" src="about:blank" width="100%" height="100%" frameborder="0" scrolling="no"><p>Your browser does not support iframes.</p></iframe>

The javascript method loads the iframes after other elements, but both of above methods are really heavy to devices because the devices must load the iframes every time for all website variants and after that the iframes are playing in the background in all variants.

So, is there any option to add heavy iframes for all variants without straining much users devices ? For example is it possible to prevent iframes loading after some width have been reached ?

Solution

  • I solved the problem by using jQuery based code:

    $(document).ready(function()
{
if ($(window).width() <= 359)
     $('#IFRAMEID1').attr("src","url of the iframe");
else if ($(window).width() >= 360 && $(window).width() <= 699)
           $('#IFRAMEID2').attr("src","url of the iframe");
    <iframe id="IFRAMEID1" src="about:blank" frameborder="0" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"><p>Your browser does not support iframes.</p></iframe>

<iframe id="IFRAMEID2" src="about:blank" frameborder="0" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"><p>Your browser does not support iframes.</p></iframe>

    With this I can put different id for every breakpoint's variant iframe and only iframes the size of the user's screen is loaded.

    I found same kind of solution from here and I added some needed things for it: https://stackoverflow.com/a/28795767/14276740