javascript - window.onload not running on page refresh - Stack Overflow

admin管理员组

文章数量:1315792

I just started using RequireJs. Only one problem. Can someone explain why the code inside the require block is not run on page refresh. It only runs when I clear the cache.

example:

require(['game','m','misc','soundutil','sprite','gui','constants'],function(Game,COMM,MISC,SoundUtil,Sprite, Gui,CNT){

    window.onload = function () {
        var canvas = document.getElementById('gameCanvas'),
         game = document.getElementById('game'),
         g = null,su = null;

        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
console.log('Gamestate at beginning',CNT.GameState._current);

thanks

I just started using RequireJs. Only one problem. Can someone explain why the code inside the require block is not run on page refresh. It only runs when I clear the cache.

example:

require(['game','m','misc','soundutil','sprite','gui','constants'],function(Game,COMM,MISC,SoundUtil,Sprite, Gui,CNT){

    window.onload = function () {
        var canvas = document.getElementById('gameCanvas'),
         game = document.getElementById('game'),
         g = null,su = null;

        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
console.log('Gamestate at beginning',CNT.GameState._current);

thanks

• javascript
• requirejs

Share Improve this question Follow edited Feb 29, 2016 at 11:58 Louis 152k2828 gold badges286286 silver badges329329 bronze badges asked Nov 11, 2013 at 22:42 RichardRichard 4,5461111 gold badges6262 silver badges8989 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

It does not look like your code is plete in your question but I'm going to hypothesize the following. What you describe looks like a race condition:

• When the cache does not contain your data, the assignment to window.onload happens before the onload even is fired, so your handler is called.

• When the cache already contains your data, then the onload event is fired before the assignment to window.onload happens, so your handler is never called.

I would suggest using the domReady plugin because it is designed to handle both cases. I've never used it myself but from what I can gather from the documentation, something like:

require(['domReady!', 'game','m','misc','soundutil','sprite','gui','constants'],...

should work. The exclamation mark is not a typo, by the way. You then need to make your onload handler be the body of the function you pass to require.

Note that document.onload suffers from the same problem. It is even more prone to the problem you're having because it often fires before window.onload does.

ETA: As Shrike says, you can also use the jQuery method of waiting: $(document).ready(...). My rule of thumb here is if I'm already using jQuery (which I actually do in all my current projects), then I'd use $(document).ready(...), otherwise I'd use domReady. The difference between the two methods has been examined in detail in this question.

It's because at the moment of your code execution window is already loaded. So you're subscribing on an event which never fires. I'm not sure what kind if cache did you mean and why window's load fires.

You can easy fix your code if you use jQuery:

require(['game', 'm', 'misc', 'soundutil', 'sprite', 'gui', 'constants'], function(Game, COMM, MISC,SoundUtil, Sprite, Gui,CNT){

  $(document).ready(function () {
  });
});

By the time RequireJS is done preparing dependencies and executes the factory function the onload could have already happened, in this case your custom handler will not be executed as it is already late (the "onload train" already left).

A RequireJS-specific alternative is to use the domready plugin:

require(['a', 'b', 'domready'], function (A, B, domReady) {
  domReady(function () {
    var canvas = document.getElementById('gameCanvas'),
      game = document.getElementById('game'),
      g = null,
      su = null;

    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    console.log('Gamestate at beginning', CNT.GameState._current);
    // ...
  });
});

More details about domready plugin in the official documentation

本文标签： javascriptwindowonload not running on page refreshStack Overflow