Load one control after another in aspx page
Question
I have a certain asp.net page where I am loading the content into a using a javascript. Basically it is like loading a content from a third party.
And I have an image which should be loaded after the javascript generates the content in
But currently what happens is the image is showing before the content is loaded into div, which is bit in appropriate. Could you please suggest me a method to do the other way around.
I have put a code sample with this.
In aspx page.
<body> <div id="bodyDiv" runat="server">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="xxxxx" data-format="inline"></script>
<a id="closeLink" href="http://www.xyz.com" class="closedbutton" runat="server"> <img id="closeImg" runat="server" src="images/remove.png" /></a>
</div></body>
What method should I use to load the image after the content from javascript is loaded.
Thanks !
2 answers
solution1
1 ACCPTED 2014-03-10 05:24:14
Your image is loading with your page. You could hide that image and make it visible after some delay after document is loaded. And as you have referenced script they will load along with your HTML and when DOM will load, So you could use setTimeout and set some delay to load your image. And load image after document is load see below example.
$(document).ready(function () {
window.setTimeout(function () {
// Your Image code goes here
// Set image display:block in this code block
// for example $('img').css('display','block');
}, 2000);
});
solution2
1 2014-03-10 05:33:20
You could use a conditional script loader like http://yepnopejs.com/ and then use the following options after the third party scripts are loaded.
You can hide the link (using css display: none;) then show it using JavaScript at the end of your loaded scripts:
document.getElementById("closeLink").style.display="block";
Or you can dynamically add the link to the page after your scripts have ran using either .appendChild() or .innerHTML(). If using JQuery you can do the following:
$(body).append('<a id="closeLink" href="http://www.xyz.com" class="closedbutton"> <img id="closeImg" src="images/remove.png" /></a>');
I would also look to see if the 3rd Party script has a callback function you can hook into when its loaded.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.