Jquery腳本加載不正確

下面是簡單的代碼。當有人按下按鈕時，它將繪製一個可重新調整大小或重新縮放的圖像，並可移動
下面的代碼工作正常，但是如果我將我的Java腳本移動到我的頭標記的畫布標記上方
腳本下方src = https://ajax.googleapis .. ....
代碼突然停止工作
好奇就如何解決什麼觸發這個事件，它Jquery腳本加載不正確

CODE：

<head> 
    <meta charset="utf-8"> 
    <title>fabric.js-simple text display</title> 

    <!-- Get version 1.1.0 of Fabric.js from CDN --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script> 

    <!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

    <body> 
     <!-- A canvas tag is required or 
      Fabric.js doesn't know where to draw. --> 

     <canvas id="myCanvas" height=600 width=800></canvas> 
     <input id="addStuff" type="button" value="Add!" /> 
    </body> 

    <script> 

     var canvas = new fabric.Canvas('myCanvas'); 
     var ctx = canvas.getContext("2d"); 

     $(function(){ 
      $('#addStuff').on('click', function(e) { 

       fabric.Image.fromURL('http://i.imgur.com/a47Yxsb.png', function(oImg) { 
        oImg.scaleToWidth(90); 
        oImg.left=50; 
        oImg.top = 50; 
        canvas.add(oImg); 
       }); 
      }); 
     }); 
    </script> 
</head> 


</html>

來源

2013-12-10 mughees ilyas

前準備這是一個常見問題。

隨着代碼爲你展示它，下面的部分是在頁面加載執行：

var canvas = new fabric.Canvas('myCanvas'); 
var ctx = canvas.getContext("2d");

雖然有權根據當文件準備好那些2線執行jQuery代碼（你的語法類似於$(document).ready(handler)）。

問題是DOM從上到下被加載，所以如果你把2個第一行放在你的文檔上面，當它們被執行時，下面的HTML元素還不存在，當您引用myCanvas元素時，會導致Javascript錯誤，此時此元素不存在。

因此，您可以在下面的jQuery「ready」函數中移動這兩行，在這種情況下，您可以將該函數放在任何地方，即使在文檔的頂部，因爲它們不會在之前被執行整個DOM被加載。最好放置它的地方應該是在一個單獨的JavaScript文件中，而且上次我檢查了包含這些.js文件的最佳位置在本體的最底部。

來源

2013-12-10 18:04:48

這是因爲ÿ你在做DOM的東西。在工作案例中，JS在body標籤中的所有內容都被加載後運行，其中包括要添加處理程序的元素，所以一切正常。當你把它放在head標籤中時，代碼執行時DOM沒有加載，所以它失敗了。

通過這一個多次被抓了，你也可以通過添加所有的JS爲$（文件）。就緒（），它等待避免這種情況的文件，即運行

$(document).ready(function() { 
    var canvas = new fabric.Canvas('myCanvas'); 
    var ctx = canvas.getContext("2d"); 

    $('#addStuff').on('click', function(e) { 
     ... 
    } 
});

來源

2013-12-10 17:58:39 krischan

這是部分錯誤的。問題出現在jQuery語句之前的2行，與您提出的解決方案類似（cfr [jQuery manual]（http://api.jquery.com/ready/）），但實際上問題是因爲如果代碼放在頁面頂部，那麼將不會加載DOM元素的引用。 –

m已經使用$（功能（），這相當於$（文檔）.ready（功能（）我猜bartdude有一點我會嘗試 –

啊是的，你是非常正確的，那是一個大腦放屁在代碼示例上比其他任何事情都好。很高興你得到了答案，爲了準確性而編輯 – krischan

Jquery腳本加載不正確

回答

相關問題