2012-03-27 21 views
1

Ich entwickle eine HTML- und js-App, die auf iOS-Geräten ausgeführt wird. In dieser App verwende ich viele Bilder und benutze src, um den Pfad dieser Bilder in einer Funktion festzulegen. Nachdem diese Funktion abgeschlossen ist, rufe ich eine andere Funktion auf, in der ich eine Zeichenfläche zeichne, das Problem ist, dass all diese Bilder nicht richtig geladen werden, einige der Bildbreiten bleiben 0. Wie kann ich sicherstellen, dass alle Bilder richtig geladen werden, bevor ich Rufen Sie die nächste Funktion auf.Bilder werden nicht richtig geladen

Dank

+6

Wir müssen Ihren relevanten Code sehen. –

+1

mögliches Duplikat von [HTML5 Canvas drawImage funktioniert nicht beim ersten Klick] (http://stackoverflow.com/questions/9796300/html5-canvas-drawimage-not-working-on-first-click) –

Antwort

0

Sie das Bild onload Ereignis verwenden kann Code auszulösen, wenn das Bild zu laufen voll beladen ist; Unten ist ein Beispiel. Der Code im Handler, der an image.onload angehängt ist, wird ausgeführt, wenn das Image vollständig geladen ist, nachdem ich image.src festgelegt habe.

var p = {  
    display: function(imageUrl) { 
     var availableDimensions = this.getAvailableDimensions(); 
     $("#loadingImg").css("display", "none"); 
     var canvas = document.getElementById("myCanvas"); 
     var image = new Image(); 
     image.onload = function() { 
      canvas.width = image.width; 
      canvas.height = image.height; 
      canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height); 
      canvas.style.display = "inline"; 
     }; 
     image.src = imageUrl + "&width=" + availableDimensions.width + "&height=" + availableDimensions.height + "&negative=false"; 
    } 
} 
+0

Ich benutze viele Bilder und alle von ihnen müssen überprüft werden – user1000397

+2

gut, wenn Sie es für ein Bild tun können, können Sie es sicherlich für viele Bilder tun, nicht? – Tom

2

Dies wird alle Ihre Bilder geladen werden gewährleisten

var images = [{src: "foo.jpg"},{...}]; 
var loaded = 0; 
function loadImages(){ 
    for(var i=0;i<images.length;++i){ 
    var tmp = new Image; 
    tmp.onload = function(){loaded++;if(loaded == images.length){nextStep();}}; 
    tmp.src = images[i].src; 
} 

function nextStep(){ 
    console.log("everything loaded"); 
} 

loadImages(); 
2

Bitte lästiges Suchen, bevor Sie eine Frage stellen.

Warten auf die Bilder geladen ist einfach:

var img = new Image(); // Create new img element 
img.onload = function(){ 
    // execute drawImage statements here 
}; 
img.src = 'myImage.png'; // Set source path 

Sicherstellen, dass das Onload-Ereignis für jedes Bild geschossen hat vor zu ziehen versucht. Wenn Sie mehrere Bilder haben und nicht etwas kompliziert machen wollen, dann gibt es Bibliotheken, die das für Sie tun, wie pxloader.

Verwandte Themen