?
Solved

Page Element Load Order

Posted on 2010-09-13
12
Medium Priority
?
566 Views
Last Modified: 2012-05-10
Hello, I have several scripts/elements on my site and I want some of them to load after others.
I have some Facebook social plugins on the site and those tend to load slowly because they have to pull info from the Facebook servers and that in turn delays the main content in the center of my site which is basically a Jquery slideshow.

So, I want certain content to load only after the rest of the page has loaded:
Facebook plugins
Live chat button
Ratepoint review box
Wibiya bar on the bottom

I want a way to load all of those things after the rest has loaded fully.
I am using other Jquery elements on the page so I already have that JS file loaded so a solution using Jquery would be fine.
I was looking into the .ready() function but I'm not sure if that's really what I'm looking for.
I was also looking at window.onload but I can't do a document.write in those and I don't know how else to put the Facebook code in there.
That code is in this format:
<fb:like-box profile_id="123287161037735" width="460" connections="16" stream="false" header="false"></fb:like-box>

Please help, thanks!!
0
Comment
Question by:lowpriceskates
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33665300
$(document).ready(function(){
  //code to load the scripts
});
is exactly the place where you should be loading those scripts programmatically
see how
http://api.jquery.com/jQuery.getScript/
http://www.1stwebdesigner.com/development/quick-tip-get-more-efficient-with-jquerys-getscript/
0
 

Author Comment

by:lowpriceskates
ID: 33665373
How would I use that code to load the FB plugin?
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33665437
well if that line has to in the body, then

$(body).append("<fb:like-box profile_id="123287161037735" width="460" connections="16" stream="false" header="false"></fb:like-box>");
should suffice.

Please try this and let me know
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:lowpriceskates
ID: 33665788
That doesn't seem to be working. I tried the following just to test it and it does not seem to have added it to the body.

<script type="text/javascript">
$(document).ready(function(){
  $(body).append("Test");
});
</script>
0
 

Author Comment

by:lowpriceskates
ID: 33665802
Here is my site by the way: http://www.lowpriceskates.com
I have the code on there now.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33665885
can you try?

<script type="text/javascript">
$(document).ready(function(){
  $("body").append("Test");
});
</script>
0
 

Author Comment

by:lowpriceskates
ID: 33665960
That doesn't seem to be working.
I was looking at this page: http://api.jquery.com/append/
Is it better to try to append it to the div that it's in? That div has a class of "fblike".
I tried to do that and it didn't work, though.
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 33666006
if you have a div with class fblike then,


<script type="text/javascript">
$(document).ready(function(){
  $("div.fblike").append("<p>Test</p>");
});
</script>
0
 

Author Comment

by:lowpriceskates
ID: 33666135
Hmmm, weird. It seems to be working in one place on the page but not the other:

http://www.lowpriceskates.com/test-1.aspx
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33666169
<<It seems to be working in one place on the page but not the other:>>
Please be specific. Thanks
0
 

Author Comment

by:lowpriceskates
ID: 33667166
OK, I figured out why that wasn't working. That was my fault. I had the code you gave me ABOVE where Jquery was included in the page. So that part is working now. Thanks!

One more small question, how can I use this method to include a script only if the protocol is HTTP?
Here is the code that I'm using now:

<script type="text/javascript">
<!--
if(window.location.protocol=="http:"){
document.write( '<\/scr'+'ipt>' );
}
//-->
</script>

Thanks!!
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33668668
you can check the protocol of the current url, by using location.href
http://www.w3schools.com/jsref/prop_loc_protocol.asp
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question