The Turning Gate

Remove Live_Update.js in TTG Galleries

I recently introduced the Remove Live_Update.js feature to several of my web photo gallery templates for Adobe Lightroom. The feature has been praised by some, questioned by others, and rightly so, I suppose. It’s even been suggested the feature is more trouble than its worth, and should be removed. I’ve been lax in explanations, and the feature can admittedly be problematic for users who don’t understand it. An explanation seems to be in order, and this is it.

Before getting into the Remove Live_Update.js feature, however, it’s important to understand what live_update.js does.

What is live_update.js?

The live_update.js file is a Javascript that is included with those HTML-based web galleries for Adobe Lightroom written in Lua. Lightroom’s (presently incomplete) Web gallery SDK explains Live Update:

Live update was developed to avoid the disrupting experience of the alternative implementation: browser reload. Without live update, the only way Lightroom can change the appearance of a previewed gallery is to issue a reload command to the embedded web browser. The browser then clears its screen, requests the page from Lightroom, and then re-renders it. The rendering process may be slow, or may involve various changes in color or other visually startling changes as it loads the page. For a change as simple as a nudge in hue of a color slider, this response is unacceptably jarring.

Think about what happens when you move from Lightroom’s Library module to the Web module. There’s a short delay while Lightroom renders images, interprets gallery files and compiles your gallery preview. Meanwhile, you spend several moments staring as a blank screen until your web gallery is finally displayed.

Now, imagine having to sit through that lull each and every time you make even the smallest change to your gallery, whether changing a color, editing text copy, nudging a slider just one pixel … That’s what would happen without the live_update.js functions.

To wit, the live_update.js file ensures a user-friendly experience while using Lightroom’s Web module by allowing changes to be made dynamically to the gallery, without the need for a page reload.

How is live_update.js implemented?

HTML is, by nature, static. It’s Javascript that allows elements in an HTML document to be changed, animated, or otherwise set into motion without a document reload. Live Update is implemented via the inclusion of the live_update.js file in all gallery pages.

Live Update sounds great! Why remove it?!

Live Update is absolutely essential to providing a positive user experience for HTML-based web photo galleries within the Lightroom Web module. Outside the Lightroom Web module, however, live_update.js is completely useless.

In the course of the past year, developing the TTG gallery templates, I’ve added numerous features – annotations, color labels, numerical ratings, just to name a few – and, with each feature, additional chunks of code. Features are great, but when they go unused, that extra code becomes useless code, and translates into extra junk in the gallery causing longer load times for pages.

As a web-designer, I believe a web page should be as light, as clean, as fast as possible. This is especially true for web photo galleries; with the expectation that images will be a major suck on bandwidth, the pages framing those images should light and fast, allowing visitors to access the meat of the gallery – the images – as quickly and as easily as possible.

With this in mind, a major focus of my recent updates to the TTG line of templates has been in providing users the option to remove useless junk, the code from unused features, from their exported galleries, reducing the overall weight of the packages.

In an exported gallery, the live_update.js file is one such piece of useless junk, weighing in at roughly 16KB in most galleries. That’s an extra 16KB being loaded with every gallery page, and it’s doing exactly nothing. And so, I thought, it’s got to go.

Lightroom user Mark Sirota also points out, “In addition to reducing each page load by 16KB, it also reduces the number of connections to the web server by one. In cases where the bottleneck is the number of simultaneous connections (which is fairly common, in my experience) this is a significant additional benefit.”

How does Remove Live_Update.js work?

It’s a checkbox that I’ve stuck in the Output Settings pane of the web module in supported galleries, including the TTG Shadowbox, Slimbox, HTML, Panic and LR Pages templates. When the checkbox is enabled, Live Update is removed; when disabled, Live Update is present. But it’s slightly more complicated than that.

The live_update.js file is included in your pages this way:

<script type="text/javascript">
	window.AgMode = "$mode";
</script>
<script type="text/javascript" src="resources/js/live_update.js"></script>

Regardless the state of the Remove Live_Update.js checkbox, live_update.js is output with your gallery. The feature utilizes if/then statements to either remove or include the above chunk of code from your gallery. Though the file always exists in your gallery (unless manually deleted), removing the above code prevents the file from being loaded with your page, reducing the total bandwidth of each page by roughly 16KB.

The Pitfalls of Remove Live_Update.js

It’s important to understand what’s happening when you opt to enable the Remove Live_Update.js feature. Yes, you’re removing some excess baggage from your gallery, but, by removing the live_update.js Javascript file from your currently previewed web gallery, you’re also disabling Live Update in the Web module.

With Live Update disabled, Windows users will suffer Internet Explorer errors every time they push a slider, change a color, edit text or enact any other change to the gallery. Mac users get off without the error messages – nice! – but will find the Web module’s controls rendered useless.

Furthermore, setting things back to rights isn’t so straight-forward as you might initially think. With Live Update disabled, the gallery doesn’t know that it’s supposed to re-enable Live Update when you disable the Remove Live_Update.js feature.

Proper Usage Guidelines

First of all, Remove Live_Update.js is an Advanced feature for Advanced users. If you’re still not comfortable or clear on using the feature after reading all of this, don’t use it.

If you do want to use it, keep a few guidelines in mind:

1. Only enable Remove Live_Update.js during gallery Export/Upload. Disable Remove Live_Update.js immediately after Export/Upload.

2. After using, it’s often a good idea to restart Lightroom before using the gallery again, thereby ensuring that Live Update will be active for your next project.

3. Never adjust gallery parameters while Remove Live_Update.js is enabled.

4. Never quit Lightroom while Remove Live_Update.js is enabled; the next time you startup, you’ll be left wondering why the Web module is “broken”.

The Controls

Originally, the controls for Remove Live_Update.js look(ed) like the image above, marked “Old”. Having fielded some confusion over the feature, I’ve decided to make implementation a more deliberate action by requiring two enabled checkboxes, and providing a more thorough explanation within the Web module, as pictured here, marked “New”. I hope this new control layout will impart some caution to users unfamiliar with the feature.

The new controls aren’t in all of the galleries yet, but will be making their way into gallery updates soon. Feedback and suggestions on the controls are welcome.

Coda

In a nutshell, that’s Live Update. I hope it helps to clear the air. If there are any additional questions or confusions over Live Update or the Remove Live_Update.js feature in my galleries, please let me know. I’ll try to update the documentation accordingly.

Finally, despite my warnings about using the Remove Live_Update.js feature, there’s nothing it will do that can’t be remedied by disabling the feature and restarting Lightroom. Don’t be afraid to try it. It’s only 16KB you stand to gain, but when used in conjunction with other code shaving options in the galleries, the shed baggage can add up to significant bandwidth reductions.

Send this article to a friend »

« Next Article | ... ... | Previous Article »