title: JS - a few questions about complete AJAX web-site - GoogleBot, optimization, templates
body: <p>I'm writing full AJAX-based website. Now I'm doing page navigation and content showing without  page reloading. That's how I've decided to do it:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;!--CSS--&gt;
          .hidden {display:none;}
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Menu bar--&gt;
      &lt;a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;"&gt;Page1&lt;/a&gt;
      &lt;a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;"&gt;Page2&lt;/a&gt;
      &lt;a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;"&gt;Page3&lt;/a&gt;
  
      &lt;!--Content blocks for different pages--&gt;
      &lt;div class="current" id="page1"&gt;
          &lt;!--Page 1 content--&gt;
      &lt;/div&gt;
      &lt;div class="hidden" id="page2"&gt;
          &lt;!--Page 2 content--&gt;
      &lt;/div&gt;
      &lt;div class="hidden" id="page3"&gt;
          &lt;!--Page 3 content--&gt;
      &lt;/div&gt;
  
      &lt;!--JS for managing pages links--&gt;
      &lt;script&gt;
          $(document).ready(function() {
          });
          function loadPage1() {
              $('.current').hide();
              $('#page1').show().addClass('current');
          };
          function loadPage2() {
              $('.current').hide();
              $('#page2').show().addClass('current');
          };
          function loadPage3() {
              $('.current').hide();
              $('#page2').show().addClass('current');
          };
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>1)First of all we are showing page1 block with class "current" and the others blocks have class "hidden"
  2)When we click loadPage2(), we find currently active block (by it's class "current") and hide it, and the show page2 block.</p>
  
  <p><strong>NB.</strong> I have to use additional class hidden for the first page-block because $(document).ready(function() {$('#page2').hide();$('#page3').hide();}); seems to be slower a bit and user may notice something strange before the page loads completely.</p>
  
  <p>Although my solution works, there are some problems:</p>
  
  <p>*<em>1)</em>*Actually, for JS-disabed users, I still have to do real pages, just with different start-blocks shown. It means I will have to do a lot of similar pages with one difference - hidden and shown different start-blocks. If Google crawl my site, won't it consider my site as content-doubling and ban it?</p>
  
  <p>*<em>2)</em>*For example, page 2 has large image. When page starts - it's hidden. However it will take a lot of time to load it even it won't be shown at first. How to manage it? Load content-on-demand? I mean ещ create 6 template text-files, and when user requests a page, JS loads a page content from file and places it into div?</p>
  
  <p>May seem a bit messy, but thanks in advance!</p>