Question

We’re using google maps and want to keep our traffic to that site to a minimum. At present we have an <li> element that contains an href to a generated maps.google.com URL. That link can change based on the orientation of the device– the same map address, but we use a resized map to fit the screen appropriately.

We’re storing the portrait and landscape google maps’ <href> values to keep from regenerating them every time the device is reoriented. Then, on every orientation change we flip the <li>‘s html property using jQuery like this:

//on an orientation change...
if (window.orientation == "portrait") {
   $(#mapLi).html(portraitMapHref);
}
else {
   $(#mapLi).html(landscapeMapHref);
}

The google API generates the hrefs and the embedded <img> tags for us on the page load, and the first time an orientation change occurs. This of course leads to a connection to maps.google.com.

When we swap back and forth using the .html function with the cached hrefs there doesn’t appear to be a simultaneous call to maps.google.com, which is what we’re after, but I wondered if this is due to browser caching or the nature of the .html function in jqm? I thought that swapping the html value in that element would trigger a call to the maps.google.com address. Should it not, or are we getting lucky with browser caching?

Answer 1

It’s not clear what exactly you store in portraitMapHref and landscapeMapHref, but I guess you store nodes.

In this case when you use $.html(), the new content will replace the current content, but the old content(node) will not be deleted, it’s still a node, no matter if it’s attached to the DOM or not.

There is nothing to load when you re-use the replaced node.