Question

我正在编写一个ASP.NET页面，它加载3个数据数组（X，Y，Z轴）并在3D动画和2D折线图中显示它们。

为此我使用ThreeJS和Google Chart。

我的页面从父页面打开为IFrame。 Chrome上每次都能正常运行。在IE和Firefox中，第一次运行良好但如果我关闭然后重新打开IFrame，我的页面未正确加载：DIV没有以正确的方式定位并且3D动画被渲染但不旋转。

我放了一个＆＃34;重置按钮＆＃34;为了测试问题是在代码中还是在加载过程中发生了什么。

我的＆＃34;重置按钮＆＃34;作品！事实上，点击后，一切都在怀特的地方，动画旋转。

我搜索了很多，我看到了一些＆＃34;冲突＆＃34;或者类似于document.ready（）和google.load函数......我几乎尝试过任何东西，但仍然没有工作......

这里有一些代码可以更好地解释：

<head>
[...]
<script type="text/javascript" src="../Js/three.min.js"></script>
<script type="text/javascript" src="../Js/TrackballControls.js"></script>
<script type="text/javascript" src="../Js/font/helvetiker_regular.typeface.js"></script>
<script type="text/javascript" src="../Js/jquery-1.js"></script>
<script type="text/javascript" src="../Js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("visualization", "1", { packages: ["corechart"] });  </script>
[...]

<script type="text/javascript">
$(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();
}
[...]
</script>
</head>
<body>
[...]
<input type="button" id="resetButton" class="btncontrol" value="Reset positions" onclick="resetPositions();" />

至少，我也试过这个文件。已经解决方案：

$(document).ready(function () {

    //here I initialize my 3D object

    setTimeout(function () {
            resetPositions();
        }, 1000);

});

此解决方案每次都有效!!!!但是我真的很讨厌......请问有不同的方法可以确保页面完全加载吗？

非常感谢！

Answer 1

好吧我已经改变了我的观点...答案是在setTimeout（fn，500）的作用下。

正如本文所述：Why is setTimeout(fn, 0) sometimes useful?

setTimeout将新事件添加到浏览器事件队列中渲染引擎已经在该队列中（不完全正确，但是足够接近）所以它在setTimeout事件之前执行。 - David Mulder 12年4月4日14:30

所以，我用这种方式改变了我的代码：

$(document).ready(function () {

//here I initialize my 3D object

setTimeout(function () {
        resetPositions();
    }, 0);

});

没有任何改变...... :(

我有点疯了......

Answer 2

文档就绪可能在加载Visualization API之前触发，因此当您尝试绘制图表时，它会因为未加载API而失败。你应该摆脱文档就绪事件处理程序并将resetPositions函数移动到谷歌加载器回调：

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

ASP.NET页面，加载谷歌图表和threejs有时不起作用

2 个答案: