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

ASP.NET page, loading google chart and threejs sometimes does not work

本文关键字：threejs 不起作用 页面 NET 加载 谷歌 ASP      更新时间：2023-09-26

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

为此，我使用ThreeJS和谷歌图表。

我的页面是从父页面作为IFrame打开的。每次在Chrome上一切都很好。在IE和Firefox中，第一次都很好，但如果我关闭然后重新打开IFrame，我的页面就没有正确加载：DIV的位置不正确，3D动画被渲染但没有旋转。

我放置了一个"重置按钮"，以测试问题是否在代码中或加载过程中发生了什么。

我的"重置按钮"工作！事实上，单击后，所有内容都在wright位置，并且动画会旋转。

我搜索了很多，发现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);
});

这种解决方案每次都有效！！！！但我真的很讨厌……请问有没有其他方法可以确保页面完全加载？？？

非常感谢！

好吧，我改变了我的观点。。。答案在于setTimeout（fn500）的作用。

正如本文所解释的：为什么setTimeout（fn，0）有时很有用？

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

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

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

没有任何更改…：（

我有点疯了。。。

文档就绪可能在加载可视化API之前启动，因此当您尝试绘制图表时，由于未加载API，因此失败。您应该去掉文档就绪事件处理程序，并将resetPositions函数移到谷歌加载器回调：

google.load("visualization", "1", { packages: ["corechart"], callback: resetPositions });
相关文章：