Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

script running slow



6:47 pm on Apr 4, 2012 (gmt 0)

HI there I have run into a strange problem.
I have a photo website and a script which gets fired on body onload. Now this script tests for javascript on/off and if it is off the pictures are displayed all in the page, if it is on they are handled by javascript. The curious thing is that with javascript enabled when I land on this page for less than a second I can see all the pictures on the page (as if javascript was off) but then it picks up the script and everything is fine. I wonder if the performance of the scrip depends on the face that it is fired on page load. Here are the relevant bits:
external script (javascripts/no_script.js):

function no_javascript(){

//big images

//big images repositioning
var big_images = document.getElementById('full_images');
big_images.style.position = "fixed";
big_images.style.margin = "-245px 0 0 -350px";
big_images.style.display = "none";
big_images.style.backgroundColor = "black";
big_images.style.color = "white";

var description1 = document.getElementById('description_1');
var description2 = document.getElementById('description_2');
var description3 = document.getElementById('description_3');

description1.style.display = "none";
description2.style.display = "none";
description3.style.display = "none";


and here are the relevant html bits:

<script type = "text/javascript" src = "javascripts/no_script.js"></script>


<body onload = "no_javascript()">

Does anybody have any suggestion?


12:08 am on Apr 5, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

As you say, the JavaScript doesn't fire until the page has finished loading, this includes all the images.

What exactly are you trying to achieve? It looks like you are loading both thumbnails and larger versions and then hiding the large ones when the page is loaded and JavaScript is enabled, and this doesn't sound like what you intend.


6:42 am on Apr 5, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

All images are loaded unconditionally.

If javascript is off, then NO javascript if executed end of story.

If javascript is on, it alters the page as you describe, after page and images are loaded.


12:21 pm on Apr 5, 2012 (gmt 0)

@Dijkgraaf, yes that's correct the page loads all the big images and hides the thumbnails through css. Then if the javascript is off nothing changes. If it is on it unhides the thumbnails and hides the big images that will be invoked through script. So in short: when javascript is off the user will see only the big images, one below the other. When it is on, the user will see the thumbnails and by clicking on it javascript/jquery brings up the big picture. The issue I am having is that for a fraction of a second - assuming javascript on - when I load the page I see all the big images one below the other as if javascript was off. I wonder what I can do to avoid this problem

@daveVk, yes sure the images will load but I somehow need to hide them before they load or quickly enough so that the screen doesn't flick the big images at me.


1:08 pm on Apr 5, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Here's what I would suggest. Give your <html> tag a class of "no-js":

<html class="no-js">

In the head of your page, include a small snippet of JavaScript that replaces that class with "js". Modernizr [modernizr.com] will do this for you. This will happen before the rest of your content loads. Then instead of using JavaScript to set the display style, include CSS like the following:

.js #image1,
.js #image2,
.js #image3,
.js #full_images,
.js description_1,
.js description_2,
.js description_3 {
display: none;


7:39 pm on Apr 5, 2012 (gmt 0)

hi fotiman, how do I go about that? I mean what do I do exactly with modernizr?
You suggested to add a little script in the head, so I wonder if I move my current script in the head would that solve the problem do you think?


8:33 pm on Apr 5, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

No, moving your current script to the head would not work, because it works directly on elements. And those elements don't exist yet in the head.

To use Modernizr, just include the modernizer script in your head and add the CSS.


6:29 pm on Apr 12, 2012 (gmt 0)


Featured Threads

Hot Threads This Week

Hot Threads This Month