Tukukkk

I have a page in a website that has tabs at the top. Each tab when clicked shows a different section. Each section has multiple iframes.

My problem is that when the page with the tabs on it is loaded, it loads slow because it loads all the iframes in all the tabs at once.

I am looking for a way to only load the visible iframes. Is there a way to block the loading of an iframe, such as settings its source when the tab is clicked or an even simpler way to just have it load when visible = true?

Searching the blogs and websites, all i find is why its bad to use iframes and alternatives to iframes. In my case, using iframes is very practical.

Here is an example of one of the tabs HTML, which is inside a div tag:

<div class="single" id="Company_Options">

                    <fieldset style="margin-top:-10px; border: 1.5px solid #00659c; height:auto;">

                        <legend style="color:#00659c;font-weight:bold;font-size:20px;" id="Company_Title" runat="server"></legend>

                        <table style="width:100%; margin-top:-10px; margin-bottom:-30px;">

                            <tr>

                                <td style="width:50%;">

                                    <fieldset>

                                        <legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Country_Title" runat="server"></legend>

                                        <iframe id="iframeCountryList" frameborder="0" scrolling="auto" width="100%" height="100%" src="CountriesList.aspx" style=""></iframe>

                                    </fieldset>

                                </td>

                                <td style="width:50%;">

                                    <fieldset>

                                        <legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Currencies_Title" runat="server"></legend>

                                        <iframe id="iframeCurrencyList" frameborder="0" scrolling="auto" width="100%" height="100%" src="CurrenciesList.aspx" style=""></iframe>

                                    </fieldset>

                                </td>

                            </tr>

                            <tr>

                                <td style="width:50%;">

                                    <fieldset>

                                        <legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Departments_Title" runat="server"></legend>

                                        <iframe id="iframeDepartmentList" frameborder="0" scrolling="auto" width="100%" height="100%" src="DepartmentList.aspx" style=""></iframe>

                                    </fieldset>

                                </td>

                                <td style="width:50%;">

                                    <fieldset>

                                        <legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Divisions_Title" runat="server"></legend>

                                        <iframe id="iframeDivisionList" frameborder="0" scrolling="auto" width="100%" height="100%" src="DivisionList.aspx" style=""></iframe>

                                    </fieldset>

                                </td>

                            </tr>

                        </table>

                    </fieldset>

                </div>

When the tab is set like this:

Company_Options.Visible = false;

The content of the iframe still loads.

I need something like this pseudo code:

iframeCountryList.Render = false;

iframeCurrencyList.Render = false;

iframeDivisionList.Render = false;

iframeDepartmentList.Render = false;

Company_Options.Visible = false;

Any ideas on how i can block the rendering of an iframe, whether it be in c# in the code behind or on client side javascript? Thanks!

You can create a control for it. Fill attribute like data-src instead of src on initialization. src can be copied from data-src when you need to load iframe content.