1

jQuery.load（）メソッドを使用して外部HTMLをdivにロードしようとしています。このメソッドをdocument.ready（）から呼び出します。

html.1

    <script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='js/script1.js'></script>
...

script1.js

$(document).ready(function() {
        $('div.dropzone').load('drawings.html');
});

ファイルはロードされますが、F5（更新）を押すまで表示されず、場合によってはCtrl F5を押すこともあります（3-5）。F5を押さないと、ページは表示されませんが、F5を押すと、ページは常に表示されます。

divにロードされるHTMLは、window.onloadで多くのキャンバス描画を行います。

drawing.html

<script>
var init = function() {
   var container = document.getElementById('MyCanvas');
   var canvas = document.createElement('canvas');
   canvas.width = container.clientWidth;
   canvas.height = 1000;
   container.appendChild(canvas);
   return canvas;
}

window.onload = function()
{
   var canvas = init();
   var context = canvas.getContext('2d');
   context.beginPath();
   //... lots of drawings here
   context.closePath();
};

</script>
...
<div id='MyCanvas'>
</div>

このキャンバスを削除して静的HTMLを配置すると、問題なく表示されます。

誰かがここで何が起こっているのかを明らかにすることができますか？

4

4 に答える 4

2

window.onload を名前付き関数に変更し、コールバックでその関数を呼び出してロードしてみてください。このようなもの：

$(document).ready(function() {
   $('div.dropzone').load('drawings.html', function() {
      doMyNewNamedFunction();
    }
});
于 2012-10-11T19:00:05.613 に答える
0

代わりにこれを試してください

$.get('/drawings.html', function(data) {
  $('div.dropzone').html(data);
  console.log('Load was performed.');
});
于 2012-10-11T19:00:10.173 に答える
0

drawing.html が読み込まれるまでに、window.onload がすでに起動している可能性があります。jquery とドキュメントの ready イベントを使用して、すべての init() の初期化と描画を行ってみませんか。イベントがすでに渡されていても、jQuery は常に関数を呼び出します。

ところで - 私は本物の JavaScript の大支持者です... しかし、これはページにしっかりとしたフレームワークが既にある場合です... それを使用してください ;)

于 2012-10-11T19:02:43.977 に答える
0

表示されているのは競合状態です。div がコンテンツの読み込みを完了する前にウィンドウの読み込みイベントが発生することがあり、その結果、すでにトリガーされており、再度トリガーされないイベントに読み込まれた js がバインドされます。

于 2012-10-11T19:01:11.010 に答える