jQuery e codice javascript sulla stessa pagina non funziona

Ho un problema su jQuery e codice javascript; quando scrivo questo jQuery seguito tra </head> e <body>jQuery e codice javascript sulla stessa pagina non funziona

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 
    $j(document).ready(function(){ 
     $j('#page_effect').fadeIn(3000); 
    }); 
</script>

e poi scrivere il codice javascript nel tag body

<script src="bubbles.js"></script> 
<script type="text/javascript"> 
    bubblesMain(new Object({ 
     type : 'linear', 
     minSpeed : 100, 
     maxSpeed : 400, 
     minSize : 30, 
     maxSize : 55, 
     num : 100, 
     colors : new Array('#FF0000','#FFFFFF','#FFCC99', '#FF33CC') 
    })); 
</script>

quindi codice jQuery può funzionare, ma il codice javascript non funziona. Finalmente ho scoperto che quando ridimensiono il browser dopo il primo caricamento, è OK per l'esecuzione.

bubble.js crea automaticamente un elemento canvas e quindi solleva alcune bolle con l'animazione all'interno dell'area di disegno.

il codice è parzialmente sopra sotto:

function bubblesMain(obj){ 
    bubbleResize(); 
    bubbles = new bubbleObject(obj); 
    bubbles.createBubbles(); 
    setInterval(start,1000/60); 
}; 

//WHEN WINDOW HEIGHT IS CHANGED, REMAKE THE CANVAS ELEMENT 
window.onresize = function(event) { 
    bubbleResize(); 
} 

function bubbleResize(){ 
    var height = parseInt(document.getElementById("canvasBubbles").clientHeight); 
    var width = parseInt(document.getElementById("canvasBubbles").clientWidth); 
    document.getElementById("canvasBubbles").innerHTML = '<canvas id="canvas" width="'+width+'px" height="'+height+'px"></canvas>'; 
} 

function start(){ 

    var canvas = document.getElementById("canvas"); 
    canvas.width = canvas.width; 
    bubbles.move(); 
    bubbles.draw(); 
};

e ho un html <div id="canvasBubbles"></div> indise.

Quindi dopo ho aggiunto il seguente codice in bubbles.js, È lavoro da eseguire.

window.onload = function(event) { 
    bubbleResize(); 
}

mi chiedo se qualcuno può suggerire una soluzione intelligente a questo? grazie.

fonte

2012-11-16 巫佳雯

tuo ''

I tag di script devono sempre andare in fondo alla pagina direttamente prima del tag, a meno che i codici non debbano essere eseguiti prima per qualche motivo.

E per quanto ne so, il metodo jQuery noConflict() è richiesto solo quando si utilizzano due diverse librerie che utilizzano entrambi il simbolo del dollaro, ovvero jQuery e MooTools, nella stessa pagina. Puoi usare jQuery e vanilla javascript senza dover usare noConflict senza problemi.

fonte

2012-12-06 00:48:08

Come indicato nelle altre risposte, i tag <script> dovrebbero essere l'ultima cosa prima del tag </body>. See this question.

Il problema con il punto in cui sono stati inseriti i tag è che il corpo della pagina HTML non è stato caricato e pertanto non è disponibile per la manipolazione. La ragione per cui il lavoro e window.onresize è perché vengono chiamati in seguito, quando il corpo del documento è disponibile per la manipolazione con JS.

Dati i dettagli forniti nella domanda, non è necessaria la dichiarazione jQuery.noConflict().

Ecco una versione alternativa del codice che dovrebbe fare la stessa cosa ma con un po 'più di efficienza. Mettilo alla fine dell'elemento body, subito prima del tag </body>. Non l'ho testato poiché non ho tutti gli script necessari (bolle, ecc.).

<!-- this goes at the end of your body element, just before the closing tag --> 
<script type="text/javascript" src="bubbles.js"></script> 
<script type="text/javascript"> 

    $.ready(function(){ 

     var canvasWrap, 
      canvasElm, 
      bubbles; 

     init(); 

     setInterval(update, 1000/60); 

     window.onresize = resize; 

     $('#page_effect').fadeIn(3000); 

     function init(){ 

      canvasWrap = document.getElementById("canvasBubbles"); 
      canvasElm = document.createElement('canvas'); 
      canvasElm.setAttribute('id', 'canvas'); 
      canvasElm.setAttribute('width', canvasWrap.clientWidth); 
      canvasElm.setAttribute('height', canvasWrap.clientHeight); 
      canvasWrap.appendChild(canvasElm); 

      bubbles = new bubbleObject({ 
       type: 'linear', 
       minSpeed: 100, 
       maxSpeed: 400, 
       minSize: 30, 
       maxSize: 55, 
       num: 100, 
       colors: ['#FF0000','#FFFFFF','#FFCC99', '#FF33CC'] 
      }); 
      bubbles.createBubbles(); 
      update(); // you might not need this 
     } 

     function resize() { 
      canvasElm.setAttribute('width', canvasWrap.clientWidth); 
      canvasElm.setAttribute('height', canvasWrap.clientHeight); 
     } 

     function update(){ 
      // canvasElm.width = canvasElm.width; // is this a hack for something? 
      bubbles.move(); 
      bubbles.draw(); 
     }; 

    }); 
</script>

fonte

2012-12-10 04:22:41 tiffon

Problemi correlati