Hi guys, I have run into an issue with my site, and I am not sure how to resolve it. Basically I have a picture website and the way the pictures are brought up is this: you have a list of thumbnails and when you click on any of those the corresponding big picture pops up. Now, I have designed my site so that if you don't have javascript enabled the thumbnails are hidden and you can view all the pictures one after the other one. The problem is when you have javascript enabled: because the script is called on page load before the scrip executes (showing the thumbnails and hiding the big pictures) the page first loads up all the images and then hides them all, which means that users will see the big pictures for a good 15 seconds before the script hides them away. Perhaps if I include the link it will be clearer what I mean: http://antobbo.webspace.virginmedia.com/petras/croatia.htm When you click on the link you will see all the big pictures first then, they are hidden away. Now this is not right obviously I want users not to see those pix at all and to be hidden straight away so that the only thing they see are the thumbnails. How would I achieve that? On the above page I have 45 pictures, I include only 2 in the below code so that it is easy to read through Here's the relevant code. HTML: ... [COLOR="#B22222"]<body onload = "no_javascript()"> [/COLOR] <div class = "wrapper"> <div class = "heading_1"> <h1>Lorem ipsum</h1> </div><!--END OF heading_1 --> <div class = "navigation"> <ul> <li><a href = "home.htm">Home</a></li> <li><a href = "travels.htm">Travels</a></li> <li><a href = "#">Portfolio</a></li> </ul> </div><!--END OF navigation--> <div class = "clear"> </div><!--END OF clear --> <div class = "nav_bar"> <img src = "images/bar.jpg" alt = ""> </div><!--END OF nav_bar--> <div id = "croatia_heading"> <h2>Croatia</h2> </div><!-- END OF heading_2 --> <div class = "main_categories" id = "main_categories"> <div class = "thumbnail_1" id = "thumbnail_1"> <a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/croatia_page/croatia_thumb_1.jpg" onClick = "change_images('image1', 'description_1')"></a> </div><!--END OF thumbnail_1 --> <div class = "thumbnail_2" id = "thumbnail_2"> <a href="javascript:void(0);"><img style="border: 0pt none;" alt="" src="images/croatia_page/croatia_thumb_2.jpg" onClick = "change_images('image2', 'description_2')"></a> </div><!--END OF thumbnail_2 --> .... <div class = "full_images" id = "full_images"> <div class = "image_div" id = "image_div"> <img src = "images/croatia_page/croatia_full_1.png" alt = "" id = "image1" > <p id = "description_1"><b>this is image 1.</b></p> <img src = "images/croatia_page/croatia_full_2.png" alt = "" id = "image2" > <p id = "description_2"><b>this is image 2.</b></p> .... HTML: Then the script that hides the full images and shows the thumbnail: function no_javascript(){ //thumbnails document.getElementById('main_categories').style.display='block'; //big images repositioning var big_images = document.getElementById('full_images'); big_images.style.display = "none"; //big_images.src.style.display = "none"; big_images.style.position = "fixed"; big_images.style.margin = "-245px 0 0 -350px"; big_images.style.backgroundColor = "transparent"; big_images.style.color = "white"; //big_images.style.fontSize = "0.9em"; $('#image_div > img').css('display', 'none'); $('#image_div > p').css('display', 'none');//these fixed all the issues : - ) } Code (markup): in the css the full images are displayed .full_images { background-color:transparent; width:680px; height:485px; /*490px */ z-index:102; left:50%; top:50%; margin: 0 auto; color:black; } HTML: but then the script hides it showing instead the thumbnail. It is this operation that takes forever because the page loads first all the full images and then runs the script. Any suggestion on how to sort this please? thanks
The easiest way to do this is to use the noscript tag. 1) Inside <noscript></noscript> put all your big images. These will ONLY be loaded if the user has JS disabled. 2) Then, after the noscript tags add the divs containing the thumbnails, hide them in with css, then show them through JS. Now, everyone will load them but only people with JS will see them.
Thanks OMGCarlos, I actually didn't think about the noscript tag at all. One question though. If I do as you said, as you correctly pointed out the big images will only load if javascript is disabled. But a user with javascript on will click on a thumbnail with the intention to display the big pictures. So, if the big pictures haven't been loaded (because they are within the noscript tag) will they show up when you click on the thumbnail (again assuming javascript on)? thanks
yes I did, and surely that affects performance but still as fast as a host can be there will still be that few seconds (if everything's good) or more than a few seconds if it slow when users will see what they shouldn't see. SO yes to an extent that plays a role, but still I need to find a way around that. I have already optimized the images as much as I could, i have amended the html and removed the call the function in the script from the body <body onload = "no_javascript()"> HTML: and moved the <script type = "text/javascript" src = "javascripts/no_script.js"></script> HTML: after the pictures in the html code so that I make sure the pictures load first and then the script is called. I have also added another script that pre-loads the pix