Here's the deal. I've tried a number of methods of lazy loading the Google Maps API JavaScript, and every time in do it, with any Lazy Loader I use, FireFox "blocks." It lazy loads just fine in Chrome.
What I mean by "blocks" is that the elements in the HTML don't display, and instead, the browsers spin trying to make a connection to download the Maps JavaScript.
The code follows. Put it in an HTML file and open it in your browser:
<html>
<head>
<script type="text/javascript" src="http://github.com/rgrove/lazyload/raw/master/lazyload.js"></script>
</head>
<body>
Open your console. Wait for "entering debugger..." message.<br />
You can't see me in FireFox, can you?
<script type="text/javascript">
// If I remove the `sensor` from the query string key and value,
// Google rejects the request and alert() does occur
LazyLoad.js("http://maps.google.com/maps/api/js?sensor=false", function() {
console.log("entering debugger...");
});
</script>
</body>
</html>
In Chrome, I see the "Open your console..." contents of the page, and the JavaScript is requested and downloaded, async, in the background.
In FireFox, the "Open your console..." contents never appear, and it hangs (status bar says "Read" from a Google DNS), never finishing or displaying the page contents.
Are you sure you need to write your own loader? What about using a previously tested implementation: Lazy Load
Are you trying to load Google Maps on demand? To load the API dynamically, pass a callback parameter, as shown on the Example
I think you'll need to rename your LazyLoad script, because it already exists. :) Speaking of which, it already exists, so why write it again?
If you just want to see how it's done, the source code is available.
Yeah, why reinvent the wheel. You seem to be using jQuery.
try this plugin:
Load image only when it is viewable?
Found a solution:
Check the URL:'http://maps.google.com/maps/api/js?sensor=true'
You would find main.js is being imported by it . A simple getScript for sensor=true will not give whole google object so next import also required.
var t=setTimeout(function(){
jQuery.getScript('http://maps.google.com/maps/api/js?sensor=true');
jQuery.getScript('http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js');
},1000);
PS: Similar issue thread Lazy loading google map api
Related
I’m trying to get a value from a JSONP address and show it in a new line of text. The script runs fine in .html (saving to .html and opening in desktop), but it doesn’t work when posting to a blog (blogspot.com).
I’ve already seen an answer here based on functions that make the code load only after the document has finished loading, but my code already has that function, and it doesn’t work anyway.
Also, I know blogspot.com allows javascript and jquery from my own experience.
Doesn’t it allow ajax requests? I haven’t seen such a statement on the web.
Any help is appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button#butt").click(function(){
$("#div1").load("http://api.sidra.ibge.gov.br/values/t/1419/n1/all/h/n/v/69/p/last%201?formato=json", function(data) {
var json = data, obj = JSON.parse(json);
$("#div1").text(obj[0].V);
});
});
});
</script>
<div id='div1'></div>
<button id="butt">Show value</button>
As mentioned by Felipe Gonçalves Marques in the comments above, one of the URLs wasn't HTTPs, which made it incompatible with the webpage, since it uses the HTTPs protocol by default. I fixed it by deselecting the automatic HTTPs redirection in Blogger's settings.
I have a Google +1 button on my site that requires the following script:
<script src="https://apis.google.com/js/platform.js" async defer></script>
The problem is as of today, apis.google.com can't be pinged from everywhere (servers are down) and some of my users don't see a button. I don't always want to use my own copy of the script because I can see that breaking the +1 functionality at some point. I'd like to use something like the solution from this question: my server's fallback copy should be fetched only when the CDN fails.
What's a good way to do that for this script? Is there a generic way to do this for any remote script using jQuery or plain js? Thanks in advance.
EDIT:
I tried jQuery getScript() and wrapped it in a function like this:
function fetch_script(script,fallback) {
$.getScript( script )
.fail(function() {
$.getScript( fallback );
});
};
This does not always work and is not reliable. Two problems I found:
500 errors trigger the fail method, but 404 errors do not and the fallback script is not loaded in these cases. Not sure what happens if the server is just down.
Some scripts are fetched (I see this in the console) but are somehow not executed (or they fail silently). Here's a script that doesn't work.
I am using head.js and using the below file to initiate the javascript file calls:
<script src="/scripts/load.js" type="text/javascript"></script>
In the load.js file I have the following code:
head.js(
{livechat: "/scripts/livechat.js"},
{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"},
{jquerytools: "http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"},
{slider: "/scripts/jquery.nivo.slider.pack.js"},
{prettyphoto: "/scripts/jquery.prettyPhoto.js"},
{sliderfunctions: "/scripts/slidercode.js"},
{functions: "/scripts/functions.js"}
);
My problem is, even though I removed the livechat line, the chat box is still appearing on all my website pages unless I manually clear the browser cache. My concern is that I no longer utilize the livechat service and I do not want the visitors to be confused by seeing the livechat box appear but not function correctly.
Is there any way to tell head.js that there has been a change in the files being loaded and to refresh browser cache or something?
You could put something along the lines of this:
<script src="/scripts/load.js?date=123456789" type="text/javascript"></script>
Adding a query string to this file should trick the browser into thinking it's something it hasn't seen before.
There is this issue I am struggling with. I know that the autoload for the google visualization geomap must be in the part of your document.
The thing is every time I reload some other pages in my application the google reloads everything and this I want to take out. So I tried taking the :
<script type="text/javascript" src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22geomap%22%2C%22table%22%5D%7D%5D%7D"></script>
out of my global template and inject it when the page call happens. So to only load the google API when I need it so to keep loading times to an absolute low. I want to know if this is do-able and if the google autoload MUST exist in the global at all times.
I am using Prototype Javascript framework and here is my code to inject the autoload :
var element = new Element('script', {
src: "http://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22geomap%22%2C%22table%22%5D%7D%5D%7D",
type: 'text/javascript'
});
$$('head')[0].appendChild(element);
This keeps it out of the rest of the site but doesn't work at all. Am I thinking about this wrong or is there some possibility of me only loading the API in one place and not everywhere.
Thank you
It seems like if you do it in the template of the view you are using it works fine. Every time the template gets rendered it refreshes the page resulting in the Google API code loading.
I am trying to extent a website page that displays google maps with the LabeledMarker. Google Maps API defines a class called GMarker which is extended by the LabeledMarker.
The problem is, I cant seem to load the LabeledMarker script properly, i.e. after the Google API loads and I get the 'GMarker not defined' error.
What is the correct way to specify the scripts in such cases?
I am using ASP.NET's ClientScript.RegisterClientScriptInclude() first for the google API url and then immediately after with the LabeledMarker script file.
The initial google API loader writes further script links that load the actual GMarker class. Shouldnt all those scripts be executed before the next script block(LabeledMarker script) is processed.
I have checked the generated HTML and the script blocks are emitted in the right order.
<script src="google api url" type="text/javascript"></script>
...
(the above scripts uses document.write() etc to append further script blocks/sources)
...
<script src="Scripts/LabeledMarker.js" type="text/javascript"></script>
Once again, the LabeledMarker.js seems to get executed before the google API finishes loading.
I think that is the problem. I was calling google.load() in the body.onload which happened after loading the scripts. Resolved by emitting script tag for the LabeledMarker from within the onload handler.