If you're really wanting to load the jsapi only when someone clicks on
that image, then simply add ?callback=onLoad to the end of the jsapi
url, as below:
s.setAttribute('src','http://www.google.com/jsapi?callback=onLoad');
This callback parameter is essential because, when you lazy load the
jsapi, you won't have the guarantee that google (or, for that matter,
google.setOnLoadCallback) will be defined. The callback parameter will
be appended to the end of the jsapi script like this:
onLoad()
So onLoad will be called when the jsapi is finished loading.
It is also important to note that, if you're going to load Google APIs
or libraries through the jsapi after the document has completed
loading, you'll need to include a callback option to google.load, as
below:
google.load('search', '1', {'callback':function(){alert('Search API is
loaded')}});
Of course, you'll want to replace the alert there with something
appropriate.
Also, on the same note, there are a couple of the libraries that
aren't exactly fond of being lazy loaded like this (e.g., JQuery). So
your mileage may vary!
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
[email protected]
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
And check out my blog, Adventures in Web Development, at
http://jgeerdes.blogspot.com
!
On Sep 21, 2009, at 7:55 PM, ftang wrote:
>
> Is there a recommend way to lazy load the http://www.google.com/jsapi
> from the html?
>
> Adding <script type="text/javascript" src="http://www.google.com/
> jsapi"> to my html will slow down the loading of my page, and I really
> want 'lazy load" this loader by putting them into a JavaScript file
>
> like /a.js
>
> var loader = document.createElement("script");
> loader.setAttribute("src", "http://www.google.com/jsapi";);
> document.body.appendChild(loader);
> google.load(....)
> ...
> function onLoad() {
> }
> google.setOnLoadCallback(onLoad);
>
>
> and invoke this a.js in a code like
>
> <img src="/a.png" onclick="s=document.createElement
> ('script');s.setAttribute('src','/a.js');document.body.appendChild
> (s);"/>
>
> so the increase to the html is only ~80 bytes
>
> and if user click on that image the a.js got loaded and load the
> loader. However, this currently does not work because the loading the
> call to google.load or google.setOnLoadCallback will start before
> "http://www.google.com/jsapi"; finish loading and therefore won't work
>
>
>
>
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google AJAX APIs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/google-ajax-search-api?hl=en
-~----------~----~----~----~------~----~------~--~---
