I apologize in advance for the general, possibly vague question but it’s been on my mind lately.
Currently I employ several buttons that upon hover the image changes (in a few sites). Some are subtle and have background colors change, some have CSS pseudo class hover entire images and some use jQuery hover method. It seems certain things require different tactics. But upon examining these as a whole, it seems I didn’t really use a consistent method.
My question is, what is the best way to do this, in general, so as to make the page the fastest and to be consistent? Even though it works OK, it seems not the best practice to have many calls to images in my CSS files. Maybe I’m wrong.
But yet, if I have lots of jQuery scripts running, that seems contra-indicated too. I look at other sites and they seem to have more *.js files rather than the scripts running in the <head>. For example, currently, I have a header file that has most of my jQuery scripts. I do this because I was always taught to keep these scripts in the <head> tag. For example, is it better to add the scripts closer to the HTML code for readability?
Should I move the JavaScript out into their own files and just includes those in the <head>? My pages work relatively well, but I have not been able to successfully say I have a framework for this phenomenon. I’m trying to improve my strategy for this kind of work before I go and refactor these pages.
Thanks in advance for any input.
Do no not include js files in head, use RequireJS or head.js to load your js files asynchronously.
Use only CSS for the hoover and merge all images into a sprite, this way you’ll get a faster page load.