1

I thinking to develop a webpage with a design like "slide", its composed by a div "frame" (overflow hidden at 100% width and height) and inside divs "containers", (scaled to 100% width and height of the window in javascript and float:left to make horizontal line).

The "containers" have the "pages" or "sections", some HTML content loading by AJAX, and DOM events (click, drag, move, etc..) attached to this HTML elements.

The sistem "slide" the containers to show only the "container" of the selected page or section, make this a full load page.

My dude is: The "outside" elements of the window (the containers are with left position -XXXXX or left XXXXX, the non visible elements outside the window size) are render by browser?

My fear is, when the page have some much "sections" loaded, and have to much HTML in the containers, if the speed slow down or the outside element dont affect the performance of the browser.

Other idea its to save the section DOM (HTML + events) in a object, clear this from the container div when its outside the vision zone (window), and when slide to the section X, load the content fron the object to the container, but i dont know if this method its to slow (and dont know how load an clear entire DOM inside a div, from and to and object).

I know mi question its to "teorical" but i search for "ideas" for make this full-load slide page.

Thanks!

Zenth
  • 769
  • 2
  • 7
  • 23
  • You may use **** inside the container/div and link them with different html files which would contain the body of that container. – Nitesh Mishra Jul 03 '13 at 09:53

1 Answers1

1

Obviously when you have something hidden on the display its not that you have not written it instead you wrote it and just hid it so it will be rendered by the browser.

On the other hand when you will store the data into a object and load it with AJAX then it will not be rendered by the browser until and unless AJAX sends back the data to you and you integrate it to your website.

In my opinion you should already write the markup when the user loads the website.

Loading data from AJAX means:

Its disadvantages:

  1. If the user's net is slow then the data may take time to load up.
  2. If the user's net shuts down then he/she wont be able to view your site or slide it anymore.

Its advantages:

  1. Your website will be loaded more quickly then it was before.

Already writing the markup means:

The aboves vice versa.

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
  • The idea its to load the content only one time, the first time the users slide to the "section", and when slide to other "section", then, hide/move-to-object/do anything. OK, if the browser render.. i need to move DOM content to object and recover it when the user change the "active" section.. – Zenth Jul 03 '13 at 10:04
  • I can't understand please tell it to me in steps :/. – Mohammad Areeb Siddiqui Jul 03 '13 at 10:08
  • You enther to the site, then load first "section" in the first container using AJAX, next you slide to the (for example) "search section", the div slide horizontal, and the content is load by AJAX. If you slide to the first section, its loaded FROM THE OBJECT, not load AJAX another time. This method allow me to load the website in "sections" but load any section ONE time, if you dont enter in one section this is not loaded never. If you enter and slide home > search > home > another > home > search you only load 3 sections, not 6 or XXXX. The problem its HOW load containers DOM to an object. – Zenth Jul 03 '13 at 10:15
  • for load/save the DOM from object? my idea is use AJAX to load from server the section one time, and after load "ofline" from object. – Zenth Jul 03 '13 at 10:22
  • @Zenth: it would be a pain, but you may put counters for each section. and check whether ajax has been called for that section or not. if called no need to call it again, as content would have already been loaded. – Nitesh Mishra Jul 03 '13 at 10:23
  • @Zenth check if that section contains any text if it does then donot load from ajax or load it :) – Mohammad Areeb Siddiqui Jul 03 '13 at 10:24
  • ok, counter method its good solution. Now i need to know how load content inside containers to an js object, to "clear" the container for not be render by browser, and when slide to the container section load this content from the object to the container. var MySections = {}; MySections.push($('container').html()) // This copy the HTML, not MOVE or reference the DOM (HTML+events) do you understand my problem? – Zenth Jul 03 '13 at 10:31
  • @Zenth the easiest would be to use – Mohammad Areeb Siddiqui Jul 03 '13 at 10:33
  • But the iframe dont allow me to "connect" the entire website, my idea its in the near future connect the controls in the sections, for example to copy elements from one section to another (while the section are previously loaded). Umm.. i think.. if I put the container visibility:hidden and dont copy to any object, just "hide" ¿the browser render the HTML? – Zenth Jul 03 '13 at 10:40
  • visibility:hidden dont work.. it render the HTML: http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Zenth Jul 03 '13 at 11:12