La página ASP.NET, cargando google chart y threejs a veces no funciona

Estoy escribiendo una página ASP.NET que carga 3 arreglos de datos (ejes X, Y, Z) y los muestro en una animación 3D y un gráfico de líneas 2D.

Para esto utilizo ThreeJS y Google Chart.

Mi página se abre como un IFrame desde una página principal. Todo funciona bien cada vez en Chrome. Tanto en IE como en Firefox, la primera vez funciona bien, pero si cierro y vuelvo a abrir el IFrame, mi página no se carga correctamente: los DIV no se colocan de la manera correcta y la animación 3D se renderiza pero no gira.

Coloqué un “botón de reinicio” para probar si el problema está en el código o si algo sucede durante la carga.

¡Mi “botón de reinicio” funciona! De hecho, después de hacer clic, todo está en el lugar de wright y la animación gira.

Busqué mucho y vi un “conflicto” o similar entre document.ready () y la función google.load … Intenté casi cualquier cosa pero aún no funcionó …

Aquí un código para explicar mejor:

 [...]       google.load("visualization", "1", { packages: ["corechart"] });  [...]  $(document).ready(function () { //here I initialize my 3D object resetPositions(); }); function resetPositions() { $('#graph2DLineChart').css('position', 'absolute'); $('#graph2DLineChart').css('top', '253px'); $('#graph2DLineChart').css('left', '652px'); $('#graph2DLineChart').css('background-color', '#ffffff'); $('#graph2DLineChart').css('color', '#000000'); $('#graph2DLineChart').css('width', '280px'); $('#graph2DLineChart').css('height', '300px'); $('#graph2DLineChart').css('z-index', '50'); $('#graph3DContainer').css('position', 'relative'); $('#graph3DContainer').css('top', '0px'); $('#graph3DContainer').css('left', '0px'); $('#graph3DContainer').css('background-color', '#333F47'); $('#graph3DContainer').css('color', '#ffffff'); $('#graph3DContainer').css('width', '906px'); $('#graph3DContainer').css('height', '670px'); $('#graph3DContainer').css('z-index', '1'); WIDTH = 906; HEIGHT = 670; camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); renderer.setSize(WIDTH, HEIGHT); controls.handleResize(); drawChart(); } [...]    [...]  

Al menos, he probado también este documento. Soluciones ya preparadas:

 $(document).ready(function () { //here I initialize my 3D object setTimeout(function () { resetPositions(); }, 1000); }); 

Esta solución funciona cada vez !!!! pero realmente LO ODIO … por favor, ¿hay alguna manera diferente de asegurar que la página esté completamente cargada?

¡Muchas muchas gracias!

ok, he cambiado mi punto de vista … la respuesta está en lo que hace setTimeout (fn, 500).

Como se explica en esta publicación: ¿Por qué a veces es útil setTimeout (fn, 0)?

setTimeout agrega un nuevo evento a la cola de eventos del navegador y el motor de renderizado ya está en esa cola (no es del todo cierto, pero está lo suficientemente cerca) para que se ejecute antes del evento setTimeout. – David Mulder 04 de junio de 12 a las 14:30

Entonces, he cambiado mi código de esta manera:

 $(document).ready(function () { //here I initialize my 3D object setTimeout(function () { resetPositions(); }, 0); }); 

Nada ha cambiado… 🙁

Me estoy poniendo un poco loco…

Es probable que el documento listo se dispare antes de que se cargue la API de visualización, de modo que cuando intenta dibujar el gráfico, falla porque la API no está cargada. Debería deshacerse del controlador de eventos preparado para documentos y mover la función resetPositions a una callback del cargador de Google:

 google.load("visualization", "1", { packages: ["corechart"], callback: resetPositions });