1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

script running slow

         

dupalo

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

10+ Year Member



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(){
//thumbnails
document.getElementById('thumbnail_1').style.display='block';
document.getElementById('thumbnail_2').style.display='block';
document.getElementById('thumbnail_3').style.display='block';
document.getElementById('thumbnail_4').style.display='block';
document.getElementById('thumbnail_5').style.display='block';
document.getElementById('thumbnail_6').style.display='block';
document.getElementById('thumbnail_7').style.display='block';
document.getElementById('thumbnail_8').style.display='block';

//big images
document.getElementById('image1').style.display="none";
document.getElementById('image2').style.display="none";
document.getElementById('image3').style.display="none";

//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";

//descriptions
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: 

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

...

<body onload = "no_javascript()">
...
</body>
....

Does anybody have any suggestion?
thanks

Dijkgraaf

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.

daveVk

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.

dupalo

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

10+ Year Member



@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.

Fotiman

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

WebmasterWorld Senior Member 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;
}

dupalo

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

10+ Year Member



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?
thanks

Fotiman

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

WebmasterWorld Senior Member 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.

dupalo

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

10+ Year Member



thanks
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 pm May 13, 2026