Ocultar contenido de un DIV

[dalfeju]

Tengo entendido que cuando le agrego a un DIV el 'display:none' este oculta el contenido. Al momento de cargar la página el contenido queda oculto, pero ¿es cargado de todas formas?.

Lo que sucede es que tengo dos DIVS con contenido pesado y busco que ambos contenidos no se carguen, sino el que está visible.

Tengo algo parecido a esto:

Código HTML:

<a href='javascript: mostrar('seccion-1);'>Sección 1</a>
<a href='javascript: mostrar('seccion-2);'>Sección 2</a>
 
<div id='seccion-1'>Contenido extenso</div>
 
<div id='seccion-2' style='display: none;'>Contenido extenso</div>
 

Cómo hago que el segundo div no sobrecargue la página con su contenido hasta que uno no de la orden. Sé que se puede resolver a través del innerHTML, pero resulta que el contenido es algo extenso y me resulta engorroso manejarlo desde ahí.

[goteen_mx]

Si se carga todo aunque este oculto, para poder hacer lo que quieres, tienes que ocupar AJAX.

Saludos.

[InKarC]

No, ajax no es necesario para eso. Lo que tiene que hacer es meterlo en una variable de javascript y luego inser el contenido en el DOM (la pagina) cuando sea necesario.

[dalfeju]

Supongo que para eso me tocaría comprimir todo el contenido en una misma línea y así poder asignárselo a la variable ¿cierto? y lo que quiero es evitarme eso.

Supongamos que este es el contenido:

bla1 bla1
bla2
bla3 bla3 bla3
bla4 bla4 bla4

Y para meterlo en una variable me tocaría hacer esto:

var cadena = 'bla1 bla1 bla2 bla3 bla3 bla3 bla4 bla4 bla4';

¿Existe alguna manera de asignárselo a la variable, pero dejándolo tal como está? algo como esto:

var cadena = 'bla1 bla1
bla2
bla3 bla3 bla3
bla4 bla4 bla4';

¿Alguna idea?

[goteen_mx]

Se puede asignar con espacios y saltos de linea no hay problema, pero de todos modos con la opción de InKarC va a estar cargado en la página pero ahora como una variable y va ser los mismo.

[InKarC]

Falso; a menos que se refiera a un servidor lento (y no una pagina pesada) usualmente lo que es pesado es la cargada y presentación de imágenes, css y scripts; el contenido en texto plano a menos que sean demasiadas lineas (2000 o mas) no realizan un relentizacion perceptible para el usuario.

Volviendo al problema: la transformación la tiene que hacer desde el lado del servidor. Por ejemplo si esta en PHP puede capturar todo un rango de echos usando las funciones ob_start(), ob_end_clean() y luego con una expresion regular borrar los saltos de linea.

Aunque si no se quiere complicar si mejor hagalo por Ajax, que gracias a jQuery es la cosa mas facil del mundo

Código Javascript:

$("#contenedor").load("pagina2.php")
 

[dalfeju]

El documento está en HTML y sólo puedo utilizar javascript. No sé como sería con Ajax, en estos temas no tengo mucha idea que digamos. Yo estoy que lo dejo así

[dalfeju]

Ya lo resolví, no se por qué desistí con el tema de asignarlo a una variable. Para esos saltos de lineas basta con agregar la barra \ y así se podrá empezar una línea más abajo.

Quedaría así:

var cadena = 'bla1 bla1\
bla2\
bla3 bla3 bla3\
bla4 bla4 bla4';

Una vez que tenga la cadena, se lo asigno al Div por medio del innerHTML y listo!

Gracias goteen_mx e InKarC por su colaboración, les debo una. Saludos!