Question about best practices for JavaScript

JavaScript
1

This has always bugged me and I can’t seem to find an answer so I figured I’d post here as the community is pretty good.

So the current trend is putting JavaScript at the bottom of the page, just above the closing body tag. My question is how do you avoid the ‘flash/flicker’ effect?

Take a slider for example. You have multiple images and JS hides them. If you put the scripts at the bottom, then the images will all appear and once the JS is done loading all the images disappear and your page jumps (this is bad UX).

Now you may initially say ‘use CSS to hide the images.’ Yeah, you could do that… but again, that can be bad UX and accessibility. If the user has JS disabled, (it’s something like <5% of users, I can’t seem to find the stats I used for that) then those images are forever hidden.

Is there anyway to fix this that’s good practice? I tried something on one site which I thought worked pretty well. I loaded a tiny JS file in the head to add CSS rules if JS was enabled. Thought I also read document.write is bad practice to use. (I’m not very skilled in JS).

I’m starting to think it’s just use whatever method is the lesser of two evils for your situation.

Any additional insight would be great.
Thanks,
Justin

2

to avoid flash/flicker, it’s a good idea to preload the images to ensure they have all been download to your browser cache before they are actually needed.

you could start the slider with window.onload which is after the page and all the images have finished loading. this should eliminate any flicker.

in this case I don’t think it would make much difference whether the javascript was in the <head> or just above the </body>

3

Sorry what I mean is all the images load, but they stack on top of each other (not z-index wise, but on screen, pushing all content down). If the JS is at the bottom then they all go away, making the page jump up. Flicker/flash was a bad wording choice on my part.

4

ok, it would help if you post the html and javascript so we can see exactly what is going on.

5

Let’s look at the options then.

Instead of having the script at the bottom of the body, let’s look at a script in the head. What would you do to that script so that it can hide the images in the body?

6

I took this from a tutorial, same images and everything, but I just stripped it down for the code as an example.
http://client.a-s-i.com/web_tests/javascript/rotating_header/index.html
So if you disable JS all images are stacked on each other. And if you do a hard refresh with JS enabled (depending on your speed you may not see it) but all the images flash up stacked very briefly and then the JS loads and hides the images. This is true on a lot of sliders or other similar effects. If you imagine it on a site it would look very ugly and unprofessional with all your elements jumping around.

7

yep, all the images flash up as stacked for a split second and then the animation starts.

I haven’t looked at the code, but it should be fixable fairly easily by using plain css to initially hide the images and then start the animation on window.onload without any flashing/flickering

to rotate the images I would use just a single <img> and use js to rotate the images through that <img> by changing the <img>'s src property

8

Also I didn’t think of it before, but some phones may have JS disabled to. No idea on stats for that though…

9

If you have something like a slider that depends on javascript anyway, you should add the images with javascript and preload them.

var a = document.createElement('img');
a.src = 'image.jpg';

Then you’re not making HTTP requests for images you’re not going to use.

10

Hmm good point. My inexperience with JS didn’t lead me in that direction at all haha. It’s a good solution but for clients probably not. Clients will probably want the images there all the time. I know it’s a small % of users I’m worrying about but just thought it would be a good discussion/stretch peoples minds. It’s just not possible to accommodate 100% of users 100% of the time. Was just curious if anyone came up with a good solution.

11

a quick and simple image rotator

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
var imgPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg'];
var imgO = new Array();
var imgIndex = 0;

//preload the images
for(var i=0; i < imgPaths.length; i++) {
     imgO[i] = new Image();
     imgO[i].src = imgPaths[i];
}
 
function rotateImage() {
    if(++imgIndex > imgPaths.length-1) {
          imgIndex = 0;
    }
    bannerO.src = imgO[imgIndex].src
}
 
window.onload=function() {
      bannerO = document.getElementById("imgBanner");
      setInterval(rotateImage,1000);
}
 
</script>
</head>
<body>
 
<div>
      <img id="imgBanner" src="pic1.jpg" alt="" />
</div>
 
</body>
</html>
12

Ahh yes, libraries. Those are big fatties that do slow down the process, no matter where they are used. You can move the slowness of loading those libraries to the head, and even the jquery code because there is no benefit to moving the document.ready events to the end of the body.

You can somewhat mitigate the problem of the fat libraries slowing things down by using google.load() to load them in parallel with the rest of the page.

Here’s how to get started on that:

13

If you tell clients it’ll improve the UX and will save a bit of bandwidth and make the page load faster, won’t they pay attention?

Alternatively, if the images are also to be seen if JS is disabled, then what you could have is a container where you have to scroll horizontally/vertically to see all the images (i.e. the container has overflow:scroll or scroll-x/y). This container should have identical dimensions to the slider. Then there is no flashing or anything of the sort, since the space will be occupied in the same way whether JS is on or not.

14

I wish clients would pay attention. I don’t have the luxury of the ‘smart’ clients haha.
But I do like that idea of using a container with the dimensions of the slider.
Thanks for the idea.

@pmw57 I believe the benefit to putting the scripts at the bottom is that when a browser encounters a JS block (script tag) it stops downloading everything else, until the JS file is done downloading.

15

That’s how things normally work, yes. The other benefit is that your scripts are able to directly interact with the body from down there.

Google though have worked out a way to prevent the downloading delay, so that things like images can continue to download while the script is downloaded.

16

Does that only apply to Chrome then? Or have other browsers started to implement it?

17

It applies to all modern browsers, and also IE as well.

18

Oh crap, I missed the link in the original post you made. Thanks, I’ll check it out.