jquery mobile 和three.js 使文档加载两次答案

【问题标题】：jquery mobile and three.js make document load twicejquery mobile 和three.js 使文档加载两次
【发布时间】：2012-12-12 04:09:56
【问题描述】：

我在玩 jquery mobile 和 three.js。

这是我的代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <title>Hello World</title>
    </head>
    <body>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>   
    <script src="js/three.min.js"></script>

    <script>

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
        $(document).live("vclick", function (evt) {
            alert('list click');
        }); 
    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );


        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

    </script>   
    </body>
</html>

这是来自three.js 的一个示例，效果很好。虽然如果我包含 jquery mobile 和 jquery 库，文档会加载两次。（有一个矩形，如果向下滚动，有一个旋转的立方体，底部有一个文本“加载”两次。）

有人可以解释发生了什么吗？我只包含了两个 jquery 库。

【问题讨论】：

有什么理由不将init 包装在$(document).ready 或pageinit 处理程序中？我的猜测是 jQM 与您的 JS 已经创建的内容相混淆，因此您应该在 jQM 初始化页面后执行此操作。
请看一下这个jsfiddle。我无法弄清楚到底是什么问题？
Valay：vclick 似乎不起作用。如果我在本地主机（WAMP）上尝试它，它会挂在“define（['require'，'./widgets/loader'，...”
请尝试从jsfiddle 运行代码并告诉我。我希望您能根据您的要求找出问题。
Valay：谢谢，但你的小提琴挂了。我可以看到红色矩形，但没有动画，只有 ui-icon ui-icon-loading 图标在它上面。顺便说一句，vclick 有效，所以 jquery mobile 已加载。

标签： jquery mobile three.js

【解决方案1】：

这是一个 jquery 移动怪癖。尝试将您的脚本移动到head，而不是body。如果这不能解决问题，请将您的 three.js 代码移动到 jqm 的 pageinit 中：

$(document).bind('pageinit', function() {
     // your code here...
})

【讨论】：