Question

我正在尝试使用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中执行了大量的画布绘制。

drawings.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时，它显示没有任何问题。

有人可以了解这里发生的事情吗？

Answer 1

尝试将window.onload更改为命名函数，并在回调中调用该函数进行加载。像这样：

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

Answer 2

试试这个

$.get('/drawings.html', function(data) {
  $('div.dropzone').html(data);
  console.log('Load was performed.');
});

Answer 3

您所看到的是竞争条件，有时窗口加载事件会在您的div加载内容之前触发，导致加载的js绑定到已触发且不会再次触发的事件。

Answer 4

在loading.html加载时，

window.onload可能已经被触发了。为什么不使用jquery和文档的ready事件来完成所有的init（）实现和绘图。即使事件已经过去，jQuery也会一直调用你的函数。

顺便说一下 - 我是真正的javascript的忠实支持者...但是这是一个你已经在页面上有一个坚实框架的情况......使用它;）

奇怪的jQuery.load行为

4 个答案: