Mixing
Block loading of an iframe while not visible asp.net
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!
javascript c# html asp.net iframe
asked Nov 20 '18 at 21:41
kristechkristech
248210
add a comment |
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!
javascript c# html asp.net iframe
asked Nov 20 '18 at 21:41
kristechkristech
248210
add a comment |
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!
javascript c# html asp.net iframe
asked Nov 20 '18 at 21:41
kristechkristech
248210
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!
javascript c# html asp.net iframe
javascript c# html asp.net iframe
asked Nov 20 '18 at 21:41
kristechkristech
248210
asked Nov 20 '18 at 21:41
kristechkristech
248210
asked Nov 20 '18 at 21:41
kristechkristech
248210
asked Nov 20 '18 at 21:41
kristechkristech
248210
asked Nov 20 '18 at 21:41
kristechkristech
248210
248210
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402006%2fblock-loading-of-an-iframe-while-not-visible-asp-net%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
add a comment |
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.
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
add a comment |
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.
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
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.
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
answered Nov 21 '18 at 9:36
Sergey SviridovSergey Sviridov
8613
8613
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402006%2fblock-loading-of-an-iframe-while-not-visible-asp-net%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
