उसी पृष्ठ पर jQuery और जावास्क्रिप्ट कोड काम नहीं करता

मुझे jQuery और जावास्क्रिप्ट कोड के बारे में कोई समस्या है; जब मैं </head> और <body>उसी पृष्ठ पर jQuery और जावास्क्रिप्ट कोड काम नहीं करता

के बीच

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

नीचे इस jQuery लिखना और फिर शरीर टैग में जावास्क्रिप्ट कोड

<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>

तो jQuery कोड काम कर सकते हैं बारे में है, लेकिन जावास्क्रिप्ट कोड काम नहीं करता। अंत में मैंने पाया कि जब मैं पहली लोडिंग के बाद ब्राउज़र का आकार बदलता हूं, तो यह ठीक है।

bubble.js स्वचालित रूप से कैनवास तत्व बनाने के लिए है और फिर कैनवास के अंदर एनीमेशन के साथ कुछ बुलबुले उठाता है।

आंशिक रूप से कोड के नीचे पर है:

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(); 
};

और मैं एक <div id="canvasBubbles"></div> indise एचटीएमएल है।

फिर मैंने निम्नलिखित कोड को bubbles.js में जोड़ने के बाद, यह चलाने के लिए काम है।

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

मुझे आश्चर्य है कि कोई इस के लिए एक बेहतर समाधान का सुझाव दे सकता है? धन्यवाद।

स्रोत

2012-11-16 巫佳雯

अपने ''

स्क्रिप्ट टैग हमेशा टैग के ठीक पहले पृष्ठ के नीचे जाना चाहिए जब तक किसी कारण से कोड को पहले निष्पादित करने की आवश्यकता न हो।

और जहां तक मुझे पता है, jQuery noConflict() विधि केवल तब आवश्यक है जब आप दो अलग-अलग पुस्तकालयों का उपयोग कर रहे हों जो दोनों एक ही पृष्ठ पर डॉलर चिह्न, उर्फ jQuery और MooTools का उपयोग करते हैं। आप बिना किसी समस्या के NoConflict का उपयोग किए बिना jQuery और वेनिला जावास्क्रिप्ट का उपयोग कर सकते हैं।

स्रोत

2012-12-06 00:48:08

जैसा कि अन्य उत्तरों में बताया गया है, <script> टैग </body> टैग से पहले अंतिम बात होनी चाहिए। See this question.

टैग जहां आपने टैग डाला है, यह समस्या यह है कि HTML पृष्ठ का शरीर लोड नहीं हुआ है और इसलिए हेरफेर के लिए उपलब्ध नहीं है। window.onload और window.onresize का कारण यह है कि उन्हें बाद में बुलाया जाता है, जब दस्तावेज़ का शरीर जेएस के साथ हेरफेर के लिए उपलब्ध होता है।

आपके प्रश्न में दिए गए विवरणों को देखते हुए, आपको jQuery.noConflict() कथन की आवश्यकता नहीं है।

यहां आपके कोड का एक वैकल्पिक संस्करण है जो एक ही चीज़ करना चाहिए लेकिन थोड़ी अधिक दक्षता के साथ। इसे </body> टैग से पहले body तत्व के अंत में रखें। मैंने इसका परीक्षण नहीं किया है क्योंकि मेरे पास आवश्यक सभी स्क्रिप्ट नहीं हैं (बुलबुले, आदि)।

<!-- 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>

स्रोत

2012-12-10 04:22:41 tiffon

संबंधित मुद्दे