等待图像加载后再继续 [英] Wait for image to be loaded before going on

问题描述

我正在使用JavaScript和 canvas 开发一个游戏。

观察资源时间表，我看到下面的代码触发了一个异步请求：

  var sprite = new Image（）; 
 sprite.src =sprites / sheet1.png; 
  

引擎将继续执行，最终开始绘制和玩水平。第一个框架之后加载的图像可能永远不会出现由于剪切（即不会变得脏）。

所以我测试了以下：

  console.log（begin）; 
 var sprite = new Image（）; 
 sprite.onload = function（）{console.log（'loaded！'）; }; 
 sprite.src =sprites / sheet1.png; 
 console.log（end）; 
  

生成的控制台输出按照它们发生的顺序是：

• begin


• >



• 已载入！我正在寻找类似的方法 $。ajax 与 async：false 执行加载。不能弄清楚如何...提前为您提供帮助！
  J。

  解决方案

  你不应该做任何同步（甚至AJAX）调用，在适当的回调中：

    function loadSprite（src，callback）{
   var sprite = new Image 
   sprite.onload = callback; 
   sprite.src = src; 
  } 
    

  然后使用它：

    loadSprite（'sprites / sheet1.png'，function（）{
   //稍后执行的代码
  } 
    

  如果你想传递额外的参数，你可以这样做：

    sprite.onload = function（）{
   callback（whatever，args，you，have）; 
  }; 
    

  
  
  

  ---

  
  
  

  如果要加载多个元素，请等待所有人完成，请考虑使用jQuery 延迟对象：

    function loadSprite（src）{
   var deferred = $ .Deferred（）; 
   var sprite = new Image（）; 
   sprite.onload = function（）{
   deferred.resolve（）; 
  }; 
   sprite.src = src; 
   return deferred.promise（）; 
  } 
    

  
  
  在加载sprite的函数中，你可以这样做：

    var loaders = []; 
   loaders.push（loadSprite（'1.png'））; 
   loaders.push（loadSprite（'2.png'））; 
   loaders.push（loadSprite（'3.png'））; 
   $ .when.apply（null，loaders）.done（function（）{
   //当一切都被加载时的回调
  }）; 
    

  http://api.jquery.com/jQuery.when/

  
  

  I'm developing a game using JavaScript and canvas. As the game loads, all images that will be used are being cached.

  Observing the resource timeline, I see that the following code triggers an asynchronous request:

  var sprite = new Image();
  sprite.src = "sprites/sheet1.png";
  

  The engine will keep executing, eventually beginning to draw and play the level. Images that are loaded after the first frame is painted might never appear due to clipping (i.e. not getting "dirty").

  So I tested the following:

  console.log("begin");
  var sprite = new Image();
  sprite.onload = function() { console.log('loaded!'); };
  sprite.src = "sprites/sheet1.png";
  console.log("end");
  

  The resulting console outputs in the order they occur are:

  • begin
  • end
  • loaded!

  I'm looking for a similar way to $.ajax with async: false to perform the loading. Can't figure out how... thanks in advance for you help! J.

  解决方案

  You shouldn't make anything synchronous (not even AJAX) calls but instead simply put your code in the appropriate callback:

  function loadSprite(src, callback) {
      var sprite = new Image();
      sprite.onload = callback;
      sprite.src = src;
  }
  

  Then use it like this:

  loadSprite('sprites/sheet1.png', function() {
      // code to be executed later
  });
  

  If you want to pass additional arguments, you can do it like this:

  sprite.onload = function() {
      callback(whatever, args, you, have);
  };
  

  ---

  If you want to load multiple elements and need to wait for all of them to finish, consider using the jQuery deferred object:

  function loadSprite(src) {
      var deferred = $.Deferred();
      var sprite = new Image();
      sprite.onload = function() {
          deferred.resolve();
      };
      sprite.src = src;
      return deferred.promise();
  }
  

  In the function loading the sprites, you do something like this:

  var loaders = [];
  loaders.push(loadSprite('1.png'));
  loaders.push(loadSprite('2.png'));
  loaders.push(loadSprite('3.png'));
  $.when.apply(null, loaders).done(function() {
      // callback when everything was loaded
  });
  

  http://api.jquery.com/jQuery.when/

  这篇关于等待图像加载后再继续的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！