Forcing JavaScript to load before images?

Hi,

I have just designed a website which uses the Dynamic Drive Image Thumbnail Viewer. If a visitor clicks on one of the links, the full-size image is superimposed over the page.

Everything worked fine locally because of the short loading times for the thumbnails. Now that the site is online, I have the problem that if I click on a thumbnail before all other thumbnails are loaded, the attribute

Code: Select all

rel="thumbnail"

in the <a> tag isn't recognised (I assume because the script hasn't been loaded yet) so that it is ignored and the image loads on a new page.

Is there any way I can force the script to be loaded before the images in order to avoid this problem?

Thanks,

Jenny

Is the script in the head section of your page?

__________________
Web Design and Development

Hi Scott,

the header contains (in this order)

1. a <link> tag for an external stylesheet
2. a <link> tag for the stylesheet accompanying the thumbnail viewer
3. a <script> tag for including the thumbnailviewer.js
4. a <style> tag for the internal styles

Should I change the order?

Thanks for your advice,

Jenny

No expert...
but shouldn't you just swap 3 and 4 around?

I am not a javascript expert, but could you call the javascript with onload in the body tag?

There really isn't a good way to get around this. While the way you have your site coded as of now may seem a bit buggy if the page hasn't finished loading, it is necessary because 5% of people browse the internet with JS disabled (meaning they'll need a link to see the full images).

Reducing the number of thumbnails per page or loading them dynamically (Like Lightbox or another Ajax script) would be the best way to improve the issue.

I don't quite understand that. If there was a way to preload the script into the browser cache before everything else is loaded, I would still have the links - surely if someone had JavaScript disabled, only the 'rel' attribute in the <a> tags would be ignored and the image would simpy open on a new page (obviously not ideal as a visitor would have to hit the 'back' button to return to the page with the thumbnails but better than not being able to see the full-size images at all)?

I must admit, I have never written a single line of JavaScript in my life, but from looking at the code inserted by DW if I add rollovers, I have been able to figure out

1. how the function is defined which preloads the images
2. how this function is called from the body tag through the onLoad attribute

Isn't there a similiar way in which the script can be preloaded before the content of the page is displayed?

Thanks,

Jenny

P.S.: I've looked at Lightbox - looks good to me, so if there isn't a solution for my problem, I'll go for that one instead.

Hello Jenny,

Looks like you have found a good solution. But I feel it's important for you to know for future reference that everything in the head section is read and loaded first. So your script is loaded before the page, but the images are not.

__________________
Web Design and Development

Thanks Scott.

I'll be trying that. I guess that will motivate me to learn some JS if I see the script each time I open the HTML file...

Cheers & good night,

Jenny

Yeah I would like to learn it properly too. I can modify scripts and implement them, but not really make them from the start. I guess thats how you learn. I think one of the things that has put me off is the fact that its client side and not everyone has it installed. Still theres some things JS does that you cant do with server side scripting.

I totally agree. I am getting more and more requests from people who want me to design their sites and JavaScript is definitely on my 'to-learn' list although it's not the highest priority - I'll rather be focusing on improving my Photoshop skills, building up on my existing PHP knowledge and start learning Flash.

Looking forward to it and I'm really pleased to have found this forum to get some support whenever I get stuck with anything.

Jenny

JS is a great tool to have but its so important to learn the right way. For me all JS/AJAX stuff should be implemented with every user in mind. Progressive Enhancement cannot be overlooked, everything should work whether JS is on or off.

I recommend DOM Scripting by Jeremy Keith if anyone is interested in learning from scratch. It's all clever stuff.

Pete.

Cheres pete, may look into that at some point

Yet, another note if you are thinking that JS is not a high priority. The amount of people that actually have JS turned off is minimal. And there are many things that are more efficient to run on the client side before you fire up your server side and/or database.

That being said, it is important to keep in mind that some people do have JS disabled... so design your pages/applications with that in mind.

__________________
Web Design and Development

Depends who your site is targeted at. I know a lot of companies have JS disabled for security reasons (I assume) so anything that maybe accessed by people who work in an office etc should probably not make too much use of it. That said it is such a valuable tool and all these RIA's wouldn't be possible without it.

AJAX (or perhaps HIJAX?) all the way!

Pete.