JScrollPane and Lazy Loading: How to avoid endless loading of a page when two javascript plugins collide
At our company we use the really flexible Content Management System ZMS which is based on Zope and works with DTML and Python.
For some time now we're using a specially written Content Object for Google Maps integration.It's based upon the general Google Maps API and the code provided in the API docs.
A client of ours recently asked for a site where the inner content is scrollable (like with iFrames, you probably remember). The implementation was supposed to be in a Web 2.0-ish way, valid and widely accessible (screenreaders).
Vertical scrollbars can be added via CSS very easily: via
overflow-y: scroll;
and a value for "height".
The problem is that this scrollbar is only visible when content flows over the given height. Our client had several pages with little content though where there would show up a large vertical blank gap on the right content edge. Really ugly.
The solution came in form of the jScrollPane-Plugin by Kelvin Luck. It simulates scrollbars via jQuery and makes them easily customizable. When there isn't enough content, the background closes with the right edge without leaving a gap - beautiful solution!
Collision of JavaScripts(?)
It so happened that shortly after implementing this, I added the Google Maps object to load the map frame.
When loading the page in Firefox 3.5 (Mac), it would instantly turn blank and start loading it endlessly. Safari seemed to be able to prevent this.
Firefox threw some indefinite error at me:
Error: _mF is not defined
Source File: http://maps.gstatic.com/intl/en_us/mapfiles/193c/maps2.api/main.js Line: 1
It took me about 3-4 hours to find something on the Internet about this, so I thought it to be valuable to post it here.
Reference link for the existence of this problem was www.mediawiki.org which finally lead me to this Google Newsgroup for so-called "Lazy Loading" where a Google employee posted the solution: Lazy Loading or Dynamic Loading.
About Lazy Loading
Lazy Loading is generally a programming term for the delay of execution of a script to the exact point where it is needed. Thus you can avoid heavy loading at the visit of a site.
The Solution (aka the workaround)
Google Maps API implementation usually looks like this:
function loadMap() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } function loadScript() { var script = document.createElement("script"); script.setAttribute("src", "http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxTPZYElJSBeBUeMSX5xXgq6lLjHthQK56gfyM5NBqKVAIOX7Pg8-ceW5A&c&async=2&callback=loadMap"); script.setAttribute("type", "text/javascript"); document.documentElement.firstChild.appendChild(script); }
I took this code from the link the Google employee provided for testing. Pay attention to the bold part:
&async=2&callback=loadMap
which is appended to the unique Google Map API. The callback gets the name of your function (see above, "loadMap"). Though I left this part out and it's still working with only the "&async=2".
Again, I can't exactly tell you what it does, but my assumption is that this is a short tag for calling the Google Map function on demand not before everything else on your page has loaded.
There seems to be a problem with the empty <script>-tag that contains the API which tries to load the map but somehow fails and keeps loading, crashing the page.
This bug seems to be related only to Firefox 3.5x and higher, and in this case only in combination with JScrollPane. I witnessed it only on FF 3.65 on a Mac. The fact that other users report it without using JScrollPane (but maybe a similar script) shows that either these scripts collide due to the loading failure of Google Map or due to a bad call within the function.
If anyone reading this who's as easy with Java Script to dig into this a little more, please leave a comment if you found something.
As for me, with a close deadline, I was relieved to have found this simple workaround, even if I'd liked to spend much more time to find the How's and Why's...
Comments [0]