Lightbox v2 performance increase [#80233]

Hello.

At first I would like to say thank you for this module. I'm using it and it works great.

There are a couple of things I would like to ask for, for next versions, if possible.

At first, this problem with the fastclickers. You know that if someone clicks in an image before the webpage is completelly load Lightbox is not initialized so the user arrives to a http://whatever/file.jpg. It's really ugly. I've found some workarounds, but not really convincint.

1. At first a theme workaround. This makes a layer appearing while the page is loading, saying "please wait", preventing fastclickers to click. It works in IE and FF. But it appears always, even in pages with no images, and this I don't like.

THEME WORKAROUND (you'll find attached "xloading.gif")

Putting this code in the head section...

  <script type="text/javascript"><!--
    function clearOverlayOnLoad() {
      var id = "xoverlay";
      if (document.getElementById)
        var obj = document.getElementById(id);
      else if (document.all)
        var obj = document.all[id];
      else if (document.layers)
        var obj = document.layers[id];
      obj.style.display = 'none';
    }
  // -->
  </script>

and this other code in the beginning of the body:

<body onload="clearOverlayOnLoad();">
<!-- Loading layer -->
<div id="xoverlay">
  <div id="xloading">
    Loading, please wait...<br/>
    <img src="/img/loading/xloading.gif" alt="Loading" width=126 height=22>
  </div>
</div>
<!-- End loading layer -->

and finally this in your CSS:

html,body {
  height: 100%;
}
#xoverlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
#xloading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
color: #fff;
font: 150% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

2. In second place, a better workaround (theorically), but I wasn't able to make it work properly. I'm not going to cut&paste the code. But I can tell you that the goal is to make Lightbox available BEFORE the onload event. You can find more info here and here.

Ok, finished with the fastclickers.

The second feature I would like to have is to avoid this lines in the pages where there are no images and LightBox is not used... if possible, of course. This is, of course, for increasing performance:

<script type="text/javascript" src="/modules/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="/modules/lightbox2/js/image_nodes.js"></script>
<script type="text/javascript" src="/modules/lightbox2/js/scriptaculous.js"></script>
<script type="text/javascript" src="/modules/lightbox2/js/lightbox.js"></script>

Thanks, and congratulations for your work.

Comment	File	Size	Author
	xloading.gif	2.31 KB	elhombresinatributos

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

leop CreditAttribution: leop commented 16 May 2007 at 16:29

Version:	master	» 5.x-1.1
Status:	Active	» Needs work

I think I found a solution for your first problem. Create a javascript file with the name lightningload.js in the lightbox2/js/ directory, with the following content:

/*
* load lightbox before image loading is complete:
*  http://dean.edwards.name/weblog/2006/06/again/
*/

function init() {
	// quit if this function has already been called
	if (arguments.callee.done) return;
		
	// flag this function so we don't do the same thing twice
	arguments.callee.done = true;
		
	// kill the timer
	if (_timer) {
		clearInterval(_timer);
		_timer = null;
	}
		
	// load the lightbox before images are loaded
	initLightbox();
};
	
/* for Mozilla */
if (document.addEventListener) {
	document.addEventListener("DOMContentLoaded", init, false);
}
	
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
	document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
	var script = document.getElementById("__ie_onload");
	script.onreadystatechange = function() {
		if (this.readyState == "complete") {
			init(); // call the onload handler
		}
	};
/*@end @*/

/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
	var _timer = setInterval(function() {
		if (/loaded|complete/.test(document.readyState)) {
			init(); // call the onload handler
		}
	}, 10);
}

/* for other browsers */
window.onload = init;

Next, add the following line to lightbox2.module in line 262 (just before the end of the lightbox2_add_files function:

drupal_add_js($path .'/js/lightningload.js');

For my site this worked fine.

Comment #2

leop CreditAttribution: leop commented 16 May 2007 at 16:39

Sorry, I was a bit too fast there...

Since the initLightbox function is now called by lightningload.js we have to remove the calls to this function from lightbox.js and lightbox_lite.js. This can easily be done by removing (or commenting) the last lines from both files:

From lightbox.js, remove the last line:
Event.observe(window, 'load', initLightbox, false);

and from lightbox_lite, also remove the last line:
addLoadEvent(initLightbox); // run initLightbox onLoad

Comment #3

stella CreditAttribution: stella commented 25 May 2007 at 11:46

Assigned:

Unassigned

» stella

The patch provided by leo_pape, for the fastclickers problem, has been added to CVS for Drupal-5 and will be included in the next release. Many thanks!

Cheers,
Stella