Wait for page to load to display image in light box

adultphotos4u · July 23rd, 2008, 11:27 AM

Is there anyway to first have the page load and the clicking on the image will open it in a lightbox.

Basically, there is a small issue. If anti-leech is set to on and a user clicks on the image before the page loads completely, it will simply open the full size image there itself (white page) which renders the anti-leech useless.

I checked around on google but could not find anything piece of code that will force the user to wait until the page loads completely.

Chuck, may be you have some work around for this

Chuck S · July 23rd, 2008, 11:56 AM

There really is no work around to that I am aware. basically the lightbox code only works one way and you need to provide the full path to the image and if you click the image before the js for lightbox loads then this could happen sure.

adultphotos4u · July 23rd, 2008, 10:23 PM

Did a google again with various keywords and phrases and finally got the following. Hope it helps many other people around here, but I am not sure about the implementation.

Quote:

You have to use one of the most useful functions in the world:

First reference your script externally in the HEAD:

<head>
<script type='text/javascript' src='myscript.js'></script>
</head>

That's all the code you need in your HTML, now in your script add this function:

function addEvent(elm, evType, fn, useCapture)
{
//Credit: Function written by Scott Andrews
//(slightly modified)

var ret = 0;

if (elm.addEventListener)
ret = elm.addEventListener(evType, fn, useCapture);
else if (elm.attachEvent)
ret = elm.attachEvent('on' + evType, fn);
elseelm['on' + evType] = fn;

return ret;
}

And finally at the end of your script file, the line that kicks it all off:

addEvent( window, "load", init);

Note though that that parameter *IS NOT* a function call, but a function so you can't use myMsg( "Hello!") for example.

Quote:

Note, however, that if your page's <body> tag already has an onload attribute, then it will overwrite your window.onload.

Example 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Onload Test 1</title>
<script type="text/javascript">
window.onload = function() {
alert('new school');
}
</script>
</head>
<body onload="alert('old school');">
</body>
</html>

In the above example, the 'new school' alert will never happen. If you remove the onload attribute from <body>, though, you'll see it work.

Example 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Onload Test 2</title>
<script type="text/javascript">
window.onload = function() {
alert('new school');
}
</script>
</head>
<body>
</body>
</html>

In that example, the 'new school' alert will happen.

A better alternative is to "attach" a listener to the onload event, instead of defining a "handler". I find the easiest way to do that is using the Yahoo UI Library's Event Utility:

Example 3:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Onload Test 3</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.0/build/event/event-min.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.on(window,'load',function(){alert('Best school');});
window.onload = function() {
alert('new school');
}
</script>
</head>
<body onload="alert('old school');">
</body>
</html>

That example uses the files served directly from Yahoo, but you could also download them and serve them from your site. This example shows that the 'Best school' alert will still be called, despite the body onload attribute (the window.onload is still not called because it's overwritten).

Hope this helps.

Can I call the attention of experts here to comment on the implementation?