jquery .data不能正常工作？

即時通訊使用畫布創建一些圖像的動畫，但我需要存儲原始寬度和高度供以後使用（如均勻縮放它們）jquery .data不能正常工作？

但做測試（最後警報顯示未定義）似乎.data不工作有人可以告訴我我做錯了什麼？

的Jquery：

$(document).ready(function(){ 
    // Creacion de imagenes animadas y sonidos 
    var gun = $("#gun")[0]; 
    var alarm = $("#alarm")[0]; 

    $('canvas.animado').each(function(index, element){ 
     var obj = $(this); 
     var canvas = $(this)[0]; 
     var context = element.getContext('2d'); 

     var img = new Image(); 
     img.src = $(this).data('url'); 
     img.onload = function() { 
      canvas.width = img.width/2; 
      canvas.height = img.height; 
      context.drawImage(img, 0, 0); 
      obj.data('width', 'prueba'); 
     }; 

     $(this).on({ 
      "mouseover" : function() { 
       $(this).css('opacity', '0.3'); 
       canvas.width = canvas.width; 
       context.drawImage(img, img.width/2,0,img.width/2,img.height,0,0,img.width/2,img.height); 
       $(this).fadeTo('slow', 1); 
      gun.play(); 
     }, 
      "mouseout" : function() { 
       $(this).css('opacity', '0.5'); 
       canvas.width = canvas.width; 
       context.drawImage(img, 0, 0); 
       $(this).fadeTo('slow', 1); 
      } 
     }); 
    }); 

    // Correccion de heroes 
    alert($('#teniente').data('width')); 

});

HTML：

<ul id="heroes"> 
    <li class="pedestal"> 
     <canvas id="aguila" class="animado img-responsive" data-url="images/sh_aguila.png"></canvas> 
    </li> 
    <li class="pedestal"> 
     <canvas id="justice" class="animado img-responsive" data-url="images/sh_justice.png"></canvas> 
    </li> 
    <li class="pedestal"> 
     <canvas id="teniente" class="animado img-responsive" data-url="images/sh_teniente.png"></canvas> 
    </li> 
    <li class="pedestal"> 
     <canvas id="ninja" class="animado img-responsive" data-url="images/sh_ninja.png"></canvas>   
    </li> 
    <li class="pedestal"> 
     <canvas id="ghost" class="animado img-responsive" data-url="images/sh_gosth.png"></canvas> 
    </li> 
</ul>

來源

2013-10-12 Chico3001

在圖片出現之前或警報之後裝？由於在圖像「加載」之前您沒有設置「寬度」數據屬性，因此您可能會在設置寬度之前嘗試提醒寬度。 –

你做錯了什麼...... - 在設置img.onload爲async之前，您正試圖訪問寬度，並且在img onload的回調中設置數據之前執行警報。

img.onload = function() { 
     canvas.width = img.width/2; 
     canvas.height = img.height; 
     context.drawImage(img, 0, 0); 
     obj.data('width', 'prueba'); 
    };

所以如果你想在圖像加載後做一些事情，最好的辦法就是調用onload的回調函數。

即

 img.onload = function() { 
     canvas.width = img.width/2; 
     canvas.height = img.height; 
     context.drawImage(img, 0, 0); 
     obj.data('width', 'prueba'); 
     doMyWork(); 
    }; 

    function doMyWork(){ 
     //now i will do something with my width stored in data 
    }

來源

2013-10-12 02:34:26 PSL

它看起來很好...

正是由於操作都必須在each()回調異步特性。一旦圖像被加載，寬度數據就會被設置（img.onload = function(){...}） - 這是一個異步操作。

你必須在循環後叫一聲警報，當圖像可能不會加載，以便負載回調可能沒有得到執行 - 這樣的寬度數據未設置

來源

2013-10-12 02:33:57

是的，這似乎是真的！ :) –

jquery .data不能正常工作？

回答

相關問題