最初の読み込み時の画像はキャンバスに表示されません

Question

画像のリストを渡してそれぞれキャンバス用に描画します。

マイview.py：

def myview(request): 
    ...  
    lista=Myobject.objects.filter(tipo=mytipo) 
    numero_oggetti = range(len(lista)) 
    lista_formattata=[] 
    for elem in lista: 
     lista_formattata.append('/media/'+str(elem.myfield)) 
    context_dict['lista']=lista_formattata 
    context_dict['numero_oggetti']=numero_oggetti 
    return render(request, 'mytemplate.html', context_dict) 

マイtemplate.html：

<script> 
    <!-- 
    window.onpageshow = function() { 
     myfunction({{lista|safe}}); 
    }; 
    --> 
    </script> 

    {% for c in numero_oggetti %} 
    <canvas id='componenti_canvas{{ c }}' width='60' height='75' style="border:1px solid #000000;"> 
     Your browser does not support the HTML5 canvas tag. 
    </canvas> 
    {% endfor %} 

マイscript.js：

function myfunction(lista) { 
    lista=lista 
    for (i=0; i<lista.length; i++) { 
    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d"); 
    var base = new Image(); 
    base.src = lista[i]; 
    ctx.scale(0.5,0.5); 
    ctx.drawImage(base, 0, 0); 
    }; 
}; 

このコードは動作しますが、時々画像が表示され、時々（のすべてをしないでくださいそれとも誰もいない）。表示されないページを読み込むと、ページを再読み込みすると表示されます。私が数分待ってから再ロードすると、再び表示されません。

GET image_name.png HTTP/1.0 200と表示されているときは、firefoxを使用していますが、コンソールログには表示されません（ときにはキャッシュに保存されている場合もありますが、時には違いはありません）。ショー。

私が試した：

からsetTimeout

をcache: falseとajax要求に-callリスト、async: false

からbase.onloadを、そのように：

base.onload = function(){ 
    ctx.scale(0.5,0.5); 
    ctx.drawImage(base, 0, 0); 
} 

が、あるいは画像絶対に見せないでください。そうでなければ、このように表示されます。私は詳細を与えることができます、もちろん私はエラーを行うことができます。

を編集します。コメントにはonloadを使用します。マイscript.js

：それは最後のキャンバスにのみ最後の画像を描画する

function myfunction(lista) { 
    lista=lista 
    for (i=0; i<lista.length; i++) { 
    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d"); 
    var base = new Image(); 

    base.onload = function() { 
     ctx.drawImage(base, 0, 0); 
    }; 

    base.src = lista[i]; 
    ctx.scale(0.5,0.5); 

    }; 
}; 

（私は多くのキャンバスを持っていると私はそれぞれの画像を描画します）。

Answer 1

ループの繰り返しごとにイメージを上書きし続けるため、これは機能しません。ベースと呼ばれる変数は1つだけです。1つのイメージしか保持できないので、その前のものはすべて失われます。

function myfunction(lista) { 
    lista=lista 
    for (i=0; i<lista.length; i++) { 
    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d"); 
    var base = new Image(); // second and more loops you over write base 

    base.onload = function() { 
     ctx.drawImage(base, 0, 0); // when it load only the last image is in base 
            // there is only one var called base so it 
            // can not hold more than one image 
    }; 

    base.src = lista[i]; 
    ctx.scale(0.5,0.5); 

    }; 
}; 

各画像に固有のセットを作成するために、必要なすべてのベクトルをラップする関数を使用します。

function myfunction(lista) { 
    lista.forEach((name,i)=>{ // each time the call back is called a 
           // new set of variables are created to 
           // store each unique image.         
    var base = new Image(); 
    base.src = name; 
    base.onload = function() { ctx.drawImage(base, 0, 0); }; 

    var canvas = document.getElementById('componenti_canvas'+i); 
    var ctx = canvas.getContext("2d");  
    ctx.scale(0.5,0.5);   
    }); 
}